vue 全局前置守卫引发死循环的缘由与解决方法

咱们常常会用到全局前置守卫，如判断用户有没有登录过，若是登录过就直接跳到目的页面，若是没有登录过，就跳转到登录页。

先看官网对全局前置守卫的介绍

使用 router.beforeEach 注册一个全局前置守卫：

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  

回到咱们刚才所说验证登录使用全局前置守卫

router.beforeEach((to,from,next) =>{
  if (sessionStorage.getItem("token")) {
     if(to.path === "/login"){
       next({path:"/dashboard"})
     }
     else{
       alert("1")
       next()
     }     
  }else{
    next({path: "/login"})   // 会再次执行前置导航守卫，由于路径变化
  }
})

上面的代码表面看没有问题，

若是sessionStorage有token，而且若是即将要进入的目标路径是登录页，就跳转到/dashboard页，若是是其它的页面，就进入

若是sessionStorage没有token 就进入登录页

可是代码执行会引发死循环，缘由是没有出口，执行next({path: "/login"})会再次执行全局前置导航守卫 

代码改为下面的就正常了

router.beforeEach((to, from, next) => {
  let token = window.sessionStorage.getItem('token');
  if (to.path != '/login' && !token) {
    next({
      path: '/login'
    })
  } else {
    if (to.path == '/login' && token) {
      next('/dashboard')
    } else {     
      next()
    }
  }
})

总结：执行next({ path: '/xxx' }) 跳到不一样的地址都会再次执行 router.beforeEach 钩子函数。