Vue Navigation Guard 直接访问 URL 时重定向

Question

我正在尝试设置 Vue Navigation Guards。如果用户通过 Firebase Auth 进行身份验证，我的一名警卫会将用户从 Index 组件重定向到 Dashboard 组件。

如果我从另一个组件通过路由器 link 导航到 Index 页面，它工作正常。但是，如果我通过在浏览器中直接键入 URL 转到 Index 页面，它不会正确重定向用户。

无论用户如何访问路由，如何实现此重定向？

const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('../components/Index.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../components/Dashboard.vue')
  }
]

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = firebase.auth().currentUser
  if(isAuthenticated && to.path === '/') {
    console.log(to.path);
    next('/dashboard')
  }
})

我也试过beforeRouteEnter在单独定义的路线上，但这也没有用。

Answer 1

那是因为在您从 firebase 获取用户数据之前调用了您的导航守卫。此时 firebase.auth().currentUser 为空，就好像你没有通过身份验证一样。

查看 this solution。非常优雅，解决了你的问题。

Vue Navigation Guard 直接访问 URL 时重定向

Vue Navigation Guard redirects when accessing URL directly

vue.js

vuejs2