vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別
在Vue項(xiàng)目中,有兩種用戶(hù)登錄狀態(tài)判斷并處理的情況,分別為:導(dǎo)航守衛(wèi)和axios攔截器。
一、什么是導(dǎo)航守衛(wèi)?vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。(在路由跳轉(zhuǎn)時(shí)觸發(fā))
我們主要介紹的是可以驗(yàn)證用戶(hù)登錄狀態(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)航正要離開(kāi)的路由
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。
next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。 next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶(hù)手動(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è)過(guò)的回調(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); });
注意:一定要有返回值
三、導(dǎo)航守衛(wèi)和攔截器的使用用戶(hù)登錄成功后我們將后臺(tái)返回的用戶(hù)token信息存儲(chǔ)至sessionStorage中
路由跳轉(zhuǎn)時(shí)使用導(dǎo)航守衛(wèi)
以上就是vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別的詳細(xì)內(nèi)容,更多關(guān)于vue 導(dǎo)航守衛(wèi)和axios攔截器的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼2. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題3. python 浮點(diǎn)數(shù)四舍五入需要注意的地方4. JAMon(Java Application Monitor)備忘記5. Springboot 全局日期格式化處理的實(shí)現(xiàn)6. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)7. python開(kāi)發(fā)一款翻譯工具8. 利用CSS制作3D動(dòng)畫(huà)9. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法10. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))
