快捷導(dǎo)航

vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別

更新時(shí)間：2020年12月19日 16:41:02 作者：劉彤彤

這篇文章主要介紹了vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

　　在Vue項(xiàng)目中，有兩種用戶登錄狀態(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)時(shí)觸發(fā)）

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

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

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

to: 即將要進(jìn)入的目標(biāo)路由對(duì)象

from: 當(dāng)前導(dǎo)航正要離開的路由

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

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

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

二、什么是axios攔截器？

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

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

　　注意：一定要有返回值