vue-routerのナビゲーションガードとaxiosブロッキングの違い

ナビゲーションガードの役割
ナビゲーションガードはvue-routerで提供されるルーティングジャンプ時にいくつかのことをし、与えられた条件に従ってグローバルガードrouterをジャンプする.beforeEachは主にユーザーのログイン状態を検証するために使用されます.ローカルナビゲーションガードbeforeEnterは主に現在のルーティングを守るために使用されます.
グローバルガードでもローカルガードでも、各ガードの方法には3つのパラメータがあります.to,from,next

to:アクセスするルーティングオブジェクト

from:現在のナビゲーションが離れるルーティング

next:コールバック関数で、このメソッドを呼び出さなければなりません.そうしないと、ルーティングはnodeのようなミドルウェアを下にresolveしません.

axiosブロッキングの役割
リクエストの送信または応答において.あるいはcatchの前にブロックするには要求ブロックと応答ブロックに分けられ、要求の送信と応答の受信時にブロック内のコールバック関数をトリガするには必ず戻り値がある

//       
axios.interceptors.request.use(function (config) {
	//         token
    config.headers.Authorization = window.sessionStorage.getItem("token");
    // Do something before request is sent
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

//       
axios.interceptors.response.use(function (response) {
	//              token     ，             
    if (response.data.meta.status == 400 && response.data.meta.msg == "  token") {
        Vue.prototype.$message.warning('    ')
        router.push('/login')
    }
    // Do something with response data
    return response;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

ナビゲーションガードとaxiosブロッキングの違い

ナビゲーションガードはフロントエンド側のみが判断し、リクエストヘッダにtokenが付いているかどうかを確認し、tokenが失効しているかどうかを判断することはできません.

でaxiosブロッカーはバックエンド側にリクエストを送信し,バックエンドはtokenの有効性を判断し,ユーザのログイン状態を決定する.

両者は、登録状態

を保証するために一緒に使用することができる.