在Vue項目中，有兩種用戶登錄狀態(tài)判斷并處理的情況，分別為：導航守衛(wèi)和axios攔截器。

一、什么是導航守衛(wèi)？

vue-router 提供的導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航。（在路由跳轉(zhuǎn)時觸發(fā)）

我們主要介紹的是可以驗證用戶登錄狀態(tài)的全局前置守衛(wèi)，當一個導航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導航在所有守衛(wèi) resolve 完之前一直處于等待中。

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...})

　每個守衛(wèi)方法接收三個參數(shù)：

to: 即將要進入的目標路由對象

from: 當前導航正要離開的路由

next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導航的狀態(tài)就是 confirmed (確認的)。 next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。 next(’/’) 或者 next({ path: ’/’ }): 跳轉(zhuǎn)到一個不同的地址。當前的導航被中斷，然后進行一個新的導航 next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。

注意：一定要確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。

二、什么是axios攔截器？

在請求或響應被 then 或 catch 處理前攔截它們，分為請求攔截器（發(fā)送請求前觸發(fā)）和響應攔截器（得到響應結(jié)果后觸發(fā)）。（在請求接口調(diào)用時觸發(fā)）

// 添加請求攔截器axios.interceptors.request.use(function (config) { // 在發(fā)送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); // 添加響應攔截器axios.interceptors.response.use(function (response) { // 對響應數(shù)據(jù)做點什么 return response; }, function (error) { // 對響應錯誤做點什么 return Promise.reject(error); });

注意：一定要有返回值

三、導航守衛(wèi)和攔截器的使用

用戶登錄成功后我們將后臺返回的用戶token信息存儲至sessionStorage中

路由跳轉(zhuǎn)時使用導航守衛(wèi)

以上就是vue 導航守衛(wèi)和axios攔截器有哪些區(qū)別的詳細內(nèi)容，更多關于vue 導航守衛(wèi)和axios攔截器的資料請關注好吧啦網(wǎng)其它相關文章！