一：路由攔截器（beforeEach：路由守衛）
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封裝的http攔截器：
在請求或回應被 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請求時使用攔截器
附：
axios create(config)
a.根據指定配置創建一個新的 axios，也就是每個新 axios都有自己的配置
b.新 axios只是沒有取消請求和批量發請求的方法，其它所有語法都是一政的
c.為什么要設計這個語法?
需求:專案中有部分介面需要的配置與另一部分介面需要的配置不太一樣，如何處理
解決:創建2個新axios，每個都有自己特有的配置，分別應用到不同變求的介面請求中
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/172147.html
標籤：其他