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

前言： 

     最近想通过实现一个登陆跳转的例子来加强对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'页面)-判断(这次判断的是跳转路径而不是是否登录)-放行(自己的理解)，这样就解决了死循环问题。