vue 導航守衛和axios攔截器有哪些區別
阿新 • • 發佈:2020-12-21
在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中
路由跳轉時使用導航守衛
以上就是vue 導航守衛和axios攔截器有哪些區別的詳細內容,更多關於vue 導航守衛和axios攔截器的資料請關注我們其它相關文章!