vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
生活随笔
收集整理的這篇文章主要介紹了
vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在Vue項目中,有兩種用戶登錄狀態(tài)判斷并處理的情況,分別為:導(dǎo)航守衛(wèi)和axios攔截器。
1. 導(dǎo)航守衛(wèi):攔截組件
- 導(dǎo)航守衛(wèi)就是我們進行某些頁面的時候需要判斷當(dāng)前用戶是否登錄過,如果登陸過,則可以跳轉(zhuǎn),否則重定向到登錄頁面
- 導(dǎo)航守衛(wèi)只是前端做出判斷,檢查請求頭中是否帶有token,并不能判斷token是否失效
- 每個守衛(wèi)方法接收三個參數(shù):
- to: Route: 即將要進入的目標(biāo) 路由對象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
- next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認的)。
- `next(false)`: 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址。
- next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進行一個新的導(dǎo)航。你可以向 next 傳遞任意位置對象,且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
- next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例,則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。
- ps: 一定要確保要調(diào)用next
2. axios攔截器:攔截后端接口
- 每次發(fā)送請求之前判斷vuex或者本地存儲中是否存在token
- 如果存在,則統(tǒng)一在http請求的header都加上token,這樣后臺根據(jù)token判斷你的登錄情況
- 即使本地存在token,也有可能token是過期的,所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷
3. 導(dǎo)航守衛(wèi)和axios攔截器的區(qū)別
- 導(dǎo)航守衛(wèi)就是路由守衛(wèi),想進入一個頁面時,判斷是否有權(quán)限訪問(有token,就有權(quán)限,沒有就返回),但并不能判斷是否失效。
- axios攔截器是發(fā)送請求判斷token的有效性,如果有就將token放在請求頭里。
- 導(dǎo)航守衛(wèi)和axios攔截器一起使用,進而來確保登錄的狀態(tài)
總結(jié)
以上是生活随笔為你收集整理的vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vb6 combo根据index显示_V
- 下一篇: tabbar怎么些_vue 做的tabB