使用 Vue Router Global Before Guards 的无限循环答案

【问题标题】：Infinite Loop with Vue Router Global Before Guards使用 Vue Router Global Before Guards 的无限循环
【发布时间】：2019-09-10 23:38:17
【问题描述】：

我正在尝试使用 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

【问题讨论】：

订购了routes 选项。如果您首先输入path: '*'，它将始终匹配（即使您重定向到/login，/login 仍然会匹配它）。

标签： javascript firebase vue.js firebase-authentication vue-router

【解决方案1】：

if (approbation && !user) 和 else if (!approbation && user && from.path !== '/') 都可能不是真的。因为你没有在 if-else 阻塞之后调用 next()，所以钩子永远不会解决，vue-router 也不知道去哪里。

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

【讨论】：