javascript - Vue/Vue-bulma - nprogress : Progress bar loads forever on guard/redirect

Question

nprogress 在其他方面都工作得很好，但在重定向到/login 时它会永远旋转。我尝试了 showProgressBar: false 但没有成功。

如果用户已登录，他们将被重定向到/dashboard，如果没有登录，他们将被重定向到/login。

我的代码如下所示:

const routes = [
  {path: '/', name: 'root', redirect: { name: 'login' }, meta: {showProgressBar: false}},
  {path: '/login', component: LoginPage, name: 'login', beforeEnter: loggedIn, meta: {showProgressBar: false}},
  {path: '/dashboard', component: DashboardPage, name: 'dashboard', meta: { requiresAuth: true }},
  {path: '/editor', component: PhoneEditorPage, name: 'editor', meta: { requiresAuth: true }},
  {path: '/usersettings', component: PinPasswordPage, name: 'pinpassword', meta: { requiresAuth: true }},
  {path: '/callforwarding', component: CallForwardingPage, name: 'callforwarding', meta: { requiresAuth: true }},
  { name: 'dropdown', path: '/dropdown', component: Dropdown, meta: { requiresAuth: true  }}
]

const router = new VueRouter({
  linkActiveClass: 'active',
  mode: 'hash',
  routes
})

function loggedIn (to, from, next) {
  const authUser = JSON.parse(window.localStorage.getItem('authUser'))
  if (authUser && authUser.auth) {
    next({name: 'dashboard'})
  } else {
    next()
  }
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'))
    if (authUser && authUser.auth) {
      next()
    } else {
      next({name: 'login'})
      this.nprogress.done()
    }
  }
  next()

感谢您的宝贵时间。

Answer 1

如果不查看正在运行的代码，回答并不简单，但是，您可以尝试反转对 this.nprogess.done() 的调用。和next(...)像这样:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'))
    if (authUser && authUser.auth) {
      next()
    } else {
      this.nprogress.done(); // <- HERE
      next({name: 'login'})
    }
  }
  next()
}

由于 next() 调用将上下文移动到新组件，因此我不确定是否会在正确的时刻调用对 nprogress 的调用。