vuexプロジェクトにおけるログインステータス管理の実践プロセス

// src ディレクトリの下に新しい store ディレクトリを作成し、次のように index.js を作成します // データ ウェアハウスを作成します import Vuex from 'vuex';
'vue' から vue をインポートします。
'loginUser.js' から loginUser をインポートします。
Vue.use(Vuex)

定数ストア = 新しい Vuex.Store({
    modules: { //モジュールは別のオブジェクト loginUser に異なる状態を置くことができます //ログインしているかどうか},
    strict: true, // ミューテーションによる状態の変更のみを許可する });

// loginUser.js を作成し、その状態/ミューテーション/アクションを作成する

//維持する必要がある状態 state: {
       loading: false, //ログイン状態 user: null, //現在ログインしているユーザー},
//計算プロパティのゲッター: {
       ステータス(状態) {
           if (状態.読み込み) {
               '読み込み中' を返す
           } それ以外の場合 (state.user) {
               「ログイン」を返す
           } それ以外 {
               'unLogin' を返す
           }
       }
   },
 
 // 読み込みとユーザーステータスの変更: {
       //読み込みを設定する
       setLoading(状態、メッセージ) {
           state.loading = メッセージ
       },
       //ユーザーを設定する setUser(state, msg) {
           状態.ユーザー = メッセージ
       }
   },
 
 //変更されたステータスをアクションで送信します。actions: {
       //ログインメソッドctxはstoreと同等です
       非同期ログイン(ctx, msg) {
           //ログインステータスをtrueに設定する
           ctx.commit("setLoading", true)
           const 結果 = xxxapi.login(msg.loginId, msg.loginPassword) を待機します
           if (結果) {
               //ログイン成功 ctx.commit('setUser', result)
               //ログインが成功すると、ログインステータスはfalseに設定されます
               ctx.commit('setLoading', false)
           }
           //ログインが成功したかどうかを返す結果を返す
       },
       //ログインしたかどうかを判定する async isLogin(ctx) {
           //ログイン ctx.commit('setLoading', true)
           // インターフェイスを呼び出して、ログインされているかどうかを確認します。const result = await xxxapi.isLogin();
           ctx.commit('setUser', 結果);
           ctx.commit('setLoading', false)
       },
       //ログアウト async logout(ctx) {
           ctx.commit('setLoading', false)
           xxxapi.logout() を待機します。
           ctx.commit('setUser', null);
           ctx.commit('setLoading', false)
       }
   },

<button :disabled="loading">{{ loading ? 'loading...' : 'ログイン' }}
</ボタン>
計算: {
// 読み込みを計算済みにカプセル化します。これにより、呼び出すたびに this.$store.state.loginUser と記述する必要がなくなります。// loading() {
    // this.$store.state.loginUser.loading を返します。
    // }
    // 最適化 // 補助関数 // import {mapState} from "vuex"
    ...mapState({
      読み込み中: (状態) => state.loginUser.loading
    })
  }

非同期ハンドル送信() {
      const result = this.$store.dispatch("loginUser/login", { を待機します。
        ログインID: this.loginId、
        ログインパスワード: this.loginPassword
      });
      if (結果) {
        // ログイン成功ルートジャンプ const path = this.$route.query.url || '/'
        this.$router.push(パス)
      }
    },

  <!-- ページのログイン ステータスを表示 -->
<span v-if="status === 'loading'">ログイン中です。お待​​ちください...</span>
​
<テンプレート v-else-if="ステータス === 'ログイン'">
    <span>現在ログインしているユーザー {{user.name}}</span>
    <span @click="handleLogout">ログアウト</span>
</テンプレート>
​
<router-link to="/login" v-else>
        ログイン</router-link>
  計算: {
...mapGetters("ログインユーザー", ["ステータス"]),
...mapState("ログインユーザー", ["ユーザー"]),
}

非同期ハンドルログアウト(){
    これを待ちます。$store.dispatch("loginUser/logout")
    //ログインページにジャンプします this.$route.push(/xxx)
},

ページが更新されるたびにログイン ステータスを確認する必要があり、これは vue が作成される main.js で決定する必要があります。
store.dispatch('loginUser/isLogin')

//routes.js の "./xx/xx.vue" から Home をインポートします
エクスポートデフォルト[
{
      パス:"/home",
    コンポーネント:ホーム、
    メタ: {
      auth: true, //アクセス権限が必要なページ}
}
]
index.js でルートガードを設定する router.beforeEach((to, from, next) => {
    （to.meta.auth）の場合{
        // アクセスするにはログイン権限が必要です const result = store.getters["loginUser/status"]
        if (結果 === 'ロード中') {
            // 読み込み状態。ログインしているかどうかはわかりません // ログイン中のページにジャンプし、そのページでログインが成功したかどうかを監視します。そうでない場合は、永遠にここに留まります // ルートがジャンプするときは、以前どこから来たのかを記録する必要があります。そうしないと、次にどのページにジャンプするかわかりません({
                path: '/loading', //[ログイン]ページへ移動 query: {
                    url: to.fullpath
                }
            })
        } そうでない場合 (結果 === 'ログイン') {
            // ログイン成功next();
        } それ以外 {
            // ログインしていません this.$message.info('ログインする必要があります');
             次（{
                パス: '/login', //[ログイン]ページに移動します。クエリ: {
                    url: to.fullpath
                }
            })
        }
    } それ以外 {
        //ログイン権限なしでアクセスできるページ next()
    }
})

作成された() {
  this.unWatch = this.$watch(() => this.$store.getters["loginUser/status"], (status) => {
    console.log('現在のステータス', ステータス);
    if (ステータス !== 'ロード中'){
      this.$router.push(this.$route.query.url || '/home').catch(() => {}
    }
  }, {
    即時: 真
  })
},
破壊された() {
  //監視をキャンセル this.unWatch()
}