vue-router作路由攔截時陷入死循環

今天分享一下使用vue-router作路由攔截時遇到的坑。

須要提早了解的api

1：router.beforeEach( to , from ,next) ;

• 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。

緣由

咱們通常在寫攔截時會這樣去寫：

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

  if(token) {
    next();
  }else {
    router.push({name:'login'})
  }

});

View Code

上訴的代碼裏的token ，是你須要存下的一個登陸身份，這裏能夠存在store裏或者是localStorage裏，固然 也能夠每次進行登陸時 從後臺獲取。

這時 咱們發現，無論咱們在哪一個頁面攔截進入了死循環。其實這算是一個vue-router的一個機制了，當咱們在router.push( {‘name’ : 'login'} ) 時又從新進入了咱們當前的這個router-beforEach事件裏，此時又進行了tokne的判斷，仍是沒有token，致使又走到了router.push({name:'login'}) 裏，而後就是一直死循環。

如何修改

以下：

router.beforeEach((to, from, next) => {
  
  if(Object.is(to.name,'login')) {
    next();
    return
  }
  
  if(token) {
    next();
  }else {
    router.push({name:'login'})
  }

});

View Code

這時 在第二次進入這個beforEach時，若是咱們須要跳轉到的頁面是 login 頁面，就直接next() 而且再也不執行該函數。

總結

1：這個問題其實也是對 vue-router 的router.beforEach運行機制不瞭解致使

2：router.beforeEach ( ) 能夠用來作前端的路由攔截，沒有token時 就跳轉到登陸頁。

3：對應的還有 router.afterEach 等api 可前往：Vue-router API 進行查看