如何解決vue路由守衛及路由守衛無限循環問題

這篇文章主要介紹了如何解決vue路由守衛及路由守衛無限循環問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

先貼一波官方文檔的內容

const router = new VueRouter({ ... })

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

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處于 等待中。

每個守衛方法接收三個參數：

• to: Route: 即將要進入的目標 路由對象

• from: Route: 當前導航正要離開的路由

• next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

• next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

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

• next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

• next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。確保要調用 next 方法，否則鉤子就不會被 resolved

然后這是我自己的總結

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/Login'
import Index from '../pages/index/Index'
import Library from '../pages/library/Library'
import Design from '../pages/design/Design'
import Administration from '../pages/administration/Administration'
import Production from '../pages/production/Production'

import Global from '../common/global/Global'

Vue.use(Router)

const router = new Router({
 routes: [
 {
  path: '/',
  name: 'login',
  component: Login
 }, {
  path: '/index',
  name: 'index',
  component: Index
 }, {
  path: '/library',
  name: 'library',
  component: Library
 }, {
  path: '/design',
  name: 'design',
  component: Design
 }, {
  path: '/administration',
  name: 'administration',
  component: Administration
 }, {
  path: '/production',
  name: 'production',
  component: Production
 }
 ]
})

router.beforeEach ((to,from,next) => {
 //將所有需要登陸才顯示的頁面的路由都放進一個數組
 const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
 //獲取登陸狀態
 let isLogin = Global.isLogin
 
 if(to.name === 'login') { //如果是登錄頁，則跳過驗證
 next() //必不可少
 return //以下的代碼不執行
 }
 if(nextRoute.indexOf(to.name) >= 0) { //判斷該頁面是否需要登陸
 if(!isLogin) { //判斷登陸狀態
  next({ name : 'login'}) //如果未登錄，則跳轉到登錄頁
 } else {
  next() //如果已經登陸，那就可以跳轉
 }
 } else { //其他的無需登陸的頁面不做驗證
  next()
 }
 
})

export default router

這樣就實現了全局路由守衛

關于路由守衛無限循環問題

如果你的代碼是這樣

 if(isLogin) {
 next()
 } else {
 next({ name: 'login')}
 }

這樣的話就會陷入無限循環

因為你的   next({ name: 'login')} 是相當于一個路由跳轉，它會再次觸發全局路由守衛，你又進入了全局路由守衛進行再次判斷，如此循環。

所以，想要結束路由守衛，整段代碼的邏輯必須由 next() 進行結尾。比如像我上面寫的，當需要進入登錄頁的時候，

 if(to.name === 'login') { 
 next() 
 return 
 }

加上這個判斷，當你進入登錄頁的時候也會調用next() , 路由守衛進入確認狀態，路由才會進行跳轉。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決vue路由守衛及路由守衛無限循環問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!