无限循环与 Vue 路由器全局在守卫之前

Question

我正在尝试使用Firebase Auth和Vue Router重定向用户。

关键是当路由器将用户重定向到"/"时，网站中不会显示任何内容(完全白屏(。

我知道我做错了什么，但我不知道到底出了什么问题。

这是我的"路由器.js"文件的外观：

const router = new Router({
  routes: [
    {
      path: '*',
      redirect: '/login'
    },
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        authenticated: true
      }
    }
  ]
})
router.beforeEach((to, from, next) => {
  let user = firebase.auth().currentUser;
  let approbation = to.matched.some(record => record.meta.authenticated)
  if (approbation && !user) {
    next('/login')
  } else if (!approbation && user && from.path !== '/') {
    next('/')
  }
})
export default router 

Answer 1

可能是if (approbation && !user)和else if (!approbation && user && from.path !== '/')都不是真的。由于您在if-else块后没有调用next()，因此钩子永远不会解析，vue-router 也不知道该去哪里。

确保在if-else块后添加对next()的调用。