vue-router全局前置守卫死循环问题

pc.d

发布于 2020.03.19 14:51 阅读 964 评论 0

前言: 

     最近想通过实现一个登陆跳转的例子来加强对vue-router和vuex的理解

遇到的问题:

      通过对vue-router官方文档的学习,router.beforeEach可以实现,然后凭借自己的理解直接写出了下列代码:

router.beforeEach((to, from, next) => {
  if (isLogin) {
    next()
  } else {
    next('/login')
  }
})

      通过isLogin这个字段来判断是否登录了,登录了的话就不作处理,没有登录的话就跳转到登陆页面,自己感觉十分正确但是执行的时候却出现了死循环问题。

原因:

      next()和next('/login')是不一样的,next()不会再次执行beforeEach方法,但是next('/login')会再次执行,所以上述代码就陷入了判断-跳转-判断-跳转......的无限循环中。

解决:

router.beforeEach((to, from, next) => {
  if (isLogin) {
    next()
  } else {
    if (to.path === '/login') {
      next()
    } else {
      next({ path: '/login', replace: true })
    }
  }
})

通过加了一层判断,这段代码的执行逻辑就变成了判断-跳转(跳转到了'/login'页面)-判断(这次判断的是跳转路径而不是是否登录)-放行(自己的理解),这样就解决了死循环问题。