vue-router 导航守卫

在使用导航守卫的时候由于没有仔细看清官网文档，我是这样写的

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (localStorage.getItem('token')) {
    console.log('token')
    next('/')
  } else {
    console.log('notoken')
    next('/login')
  }
})

router.afterEach(() => {
  NProgress.done()
})

导致的结果

发现其中的beforeEach被无限调用，最后报错失败，而进度条也一直旋转，没有执行到afterEach，查看官网文档

问题就处在 next() 如果带参数，则重新执行beforeEach函数。解决方案：

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (localStorage.getItem('token')) {
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else {
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  }
})

router.afterEach(() => {
  console.log('done')
  NProgress.done()
})

然而点击登陆或跳转其他连接的时候，进度条出问题了。

仔细观察，发现是没有执行到afterEach。最后反复调试，发现跳转页面时beforeEach仅执行了一次，并且到next('/login')或者next('/')之后就停止了，也不会执行afterEach。这样结果的原理不是很懂，但是最终解决方案如下：

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (localStorage.getItem('token')) {
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      next()
    }
  } else {
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})