在Vue項目中，有兩種用戶登錄狀態判斷並處理的情況，分別為：導航守衛和axios攔截器。
一、什么是導航守衛？
vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。（在路由跳轉時觸發）
我們主要介紹的是可以驗證用戶登錄狀態的全局前置守衛，當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於等待中。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
每個守衛方法接收三個參數：
-
to:即將要進入的目標路由對象 -
from:當前導航正要離開的路由 -
next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴next方法的調用參數。-
next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed (確認的)。 -
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到from路由對應的地址。 -
next('/')或者next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航 -
next(error): (2.4.0+) 如果傳入next的參數是一個Error實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。
-
注意：一定要確保要調用 next 方法，否則鈎子就不會被 resolved。
二、什么是axios攔截器？
在請求或響應被 then 或 catch 處理前攔截它們，分為請求攔截器（發送請求前觸發）和響應攔截器（得到響應結果后觸發）。（在請求接口調用時觸發）
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response;
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error);
});
注意：一定要有返回值
三、導航守衛和攔截器的使用
- 用戶登錄成功后我們將后台返回的用戶token信息存儲至sessionStorage中
- 路由跳轉時使用導航守衛
- 發送axios請求時使用攔截器
