今天就跟大家聊聊有關(guān)axios攔截器與vue導(dǎo)航守衛(wèi)有什么不同，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

網(wǎng)站設(shè)計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺管理系統(tǒng)；網(wǎng)站制作、成都網(wǎng)站設(shè)計收費合理；免費進行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運營了十年的創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司。

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

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

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

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

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

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

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

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

• next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。

• next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址。

• next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航

• next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例，則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。

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

二、什么是axios攔截器？

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

// 添加請求攔截器
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)

看完上述內(nèi)容，你們對axios攔截器與vue導(dǎo)航守衛(wèi)有什么不同有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享題目：axios攔截器與vue導(dǎo)航守衛(wèi)有什么不同-創(chuàng)新互聯(lián)
分享路徑：http://www.chinadenli.net/article42/djsgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計、App設(shè)計、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)