|
在Vue項目中，有兩種用戶登錄狀態(tài)判斷并處理的情況，分別為：導(dǎo)航守衛(wèi)和axios攔截器。
一、什么是導(dǎo)航守衛(wèi)？
vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。（在路由跳轉(zhuǎn)時觸發(fā)）
我們主要介紹的是可以驗證用戶登錄狀態(tài)的全局前置守衛(wèi)，當一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于等待中。
1 2 3 4 5 | const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
|
每個守衛(wèi)方法接收三個參數(shù)：
注意：一定要確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。
二、什么是axios攔截器？
在請求或響應(yīng)被 then 或 catch 處理前攔截它們，分為請求攔截器（發(fā)送請求前觸發(fā)）和響應(yīng)攔截器（得到響應(yīng)結(jié)果后觸發(fā)）。（在請求接口調(diào)用時觸發(fā)）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
});
|
注意：一定要有返回值
三、導(dǎo)航守衛(wèi)和攔截器的使用
- 用戶登錄成功后我們將后臺返回的用戶token信息存儲至sessionStorage中
- 路由跳轉(zhuǎn)時使用導(dǎo)航守衛(wèi)
|
