在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

// 添加路由守衛(wèi)--導(dǎo)航守衛(wèi)// 作用是通過判斷來決定當(dāng)前的路由跳轉(zhuǎn)到底能不能進行// 這種守衛(wèi)，只要進行路由的跳轉(zhuǎn)就會自動的觸發(fā)，不能人為調(diào)用router.beforeEach((to, from, next) => {// to:目標(biāo)路由// from:源路由// next:下一步的操作，就是用戶當(dāng)前需要進行的操作console.log(to);// console.log(from);// 判斷當(dāng)前用戶是否登陸，如果登陸了則可以跳轉(zhuǎn)，否則重定向到登陸頁// 獲取用戶登陸之后的token，進行token的判斷if (to.path !== '/login' || to.path !== '/register') { // 非登錄頁面驗證是否存在tokenlet token = localStorage.getItem('token')if (token) {next()} else {Toast('請先登陸')// 說明沒有登陸，則重定向到登陸頁next({ name: 'login' })}} else {next()}})

2. axios攔截器：攔截后端接口

• 每次發(fā)送請求之前判斷vuex或者本地存儲中是否存在token
• 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況
• 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷

// 添加請求攔截器// 每一個我們自己封裝的axios請求都會經(jīng)過這個攔截器axios.interceptors.request.use(function (config) {console.log(config)// 在發(fā)送請求之前做些什么:我要看看有沒有token,如果有，則以請求頭的方式進行傳遞let token = localStorage.getItem('token')if (token) {// 設(shè)置請求頭config.headers.Authorization = token}return config;}, function (error) {// 對請求錯誤做些什么return Promise.reject(error);});

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)

千鋒HTML5學(xué)院：如何講清楚函數(shù)防抖？?zhuanlan.zhihu.com千鋒HTML5學(xué)院：如何講清楚函數(shù)節(jié)流？?zhuanlan.zhihu.com千鋒HTML5學(xué)院：如何講清楚閉包？?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。