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。

Vue / Vue-bulma - nprogress：进度条在保护/重定向上永远加载

1 个答案: