时间戳

首页 > 解决方案 > 使用 Vue Router Global Before Guards 的无限循环

javascript - 使用 Vue Router Global Before Guards 的无限循环

问题描述

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

关键是当路由器将用户重定向到“/”时，网站上没有显示任何内容（完全白屏）。

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

这是我的“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

标签： javascriptfirebasevue.jsfirebase-authenticationvue-router

解决方案

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

确保在阻止next()后添加呼叫。if-else

推荐阅读