Vueにログイン認証傍受機能を設置するアイデアを詳しく解説

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    州： {
        // トークン: "",
        //ユーザー情報はブラウザトークンから直接取得できます: localStorage.getItem("token"),
        //デシリアライズ操作 userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
    },
    突然変異:
        /**セット操作に似ています*/
        //トークンに値を割り当てる SET_TOKEN: (state, token) => {
            state.token = トークン;
            // ブラウザを閉じても情報が残るようにブラウザに情報を保存します。localStorage.setItem("token", token);
        },
        //userinfoに値を割り当てる SET_USERINFO: (state, userInfo) => {
            状態.userInfo = ユーザー情報;
            // ブラウザを閉じるたびにセッションはクリアされ、再度ログインすると再生成されます。 // sessionStorage はオブジェクトを保存できないため、文字列の形式で保存する必要があります。 sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
        },
        //ユーザー情報を削除する REMOVE_INFO: (state) => {
            //ユーザー情報を削除する場合は、すべてのユーザー情報を空に設定します。state.token = "";
            状態.userInfo = {};
            localStorage.setItem("トークン", "");
            sessionStorage.setItem("userInfo", JSON.stringify(""));
        }

    },
    ゲッター: {
        /**get リクエストと同様*/
        //ユーザー情報を取得するgetUser: state => {
            state.userInfo を返します。
        }
    },
    アクション: {},
    モジュール: {}
})

/**
 * ルーティングレジストリ */

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。


// 登録ページ import Login from '../views/Login.vue'
'../views/BlogEdit.vue' から BlogEdit をインポートします。


Vue.use(VueRouter)

定数ルート = [
    {
        パス: '/login',
        名前: 'ログイン',
        コンポーネント: ログイン
    },
    {
        パス: '/blog/add',
        名前: 'BlogAdd',
        コンポーネント: BlogEdit、
        // この操作はログイン後にのみ実行できることを示す権限アクセスを追加します。meta: {
            認証が必要: 有効
        }
    },


]

const ルーター = 新しい VueRouter({
    モード: '履歴'、
    ベース: process.env.BASE_URL、
    ルート
})

デフォルトルーターをエクスポートする

/**
 * ログイン認証を要求します。ログインしていない場合はページにアクセスできず、ログインページに戻ります*/
「./router」からルーターをインポートします。

// ルーティング設定ファイルのパラメータに従って、ルート判定ログイン router.beforeEach((to,from,next)=>{
    //ルートにログイン権限が必要かどうかを判断する//record.meta.requireAuthはリクエストに含まれるパラメータです if (to.matched.some(record => record.meta.requireAuth)){
        //ローカルトークンを取得する
        const トークン = localStorage.getItem("トークン")
        console.log("トークンを表示----------: " + トークン)

        //現在のトークン、つまりログインに使用されたトークンが存在するかどうかを判断します
        if (トークン){
            //ログインページを指している場合は何もしない if (to.path === "/login"){

            }それ以外 {
                //ログインページではなくトークンが存在する場合はnext()を解放します
            }
        }それ以外 {
        // トークンが存在しない場合は // ログインへ進む next({path:'/login'})
        }

    }それ以外 {
        //ログイン認証が不要な場合は、next()に直接アクセスします
    }
})

//permission.js をインポートし、ユーザーがフロントエンドの権限制御を実行しますimport "./permission"