即使没有人在 Firebase 上登录，带有 authRequired 元数据的页面仍会显示一瞬间

Posted 2023-02-22

【中文标题】即使没有人在 Firebase 上登录，带有 authRequired 元数据的页面仍会显示一瞬间

【英文标题】：Page with the authRequired meta still gets shown for a split second even when no one is logged in on Firebase

【发布时间】：2021-06-16 18:14:22

【问题描述】：

我是 Vue / Web 开发的新手，从一开始我就玩得很开心，但现在我被困住了。

目前我正在使用 Firebase 身份验证创建管理仪表板。一切似乎都按预期进行，但有一件事我仍然不明白。

在 Vue 路由器中，我设置了所有不同的路由，并且无法访问仪表板（如果未登录到 Firebase）。

这是我的路由器卫士：

const routes = [
  
    path: "/",
    name: "Home",
    component: Home,
  ,
  
    path: "/register",
    name: "Register",
    component: Register,
  ,
  
    path: "/login",
    name: "Login",
    component: Login,
  ,
  
    path: "/dashboard",
    name: "Dashboard",
    component: Dashboard,
    meta: 
      requiresAuth: true,
    ,
  ,
];       

 router.beforeEach((to) => 
      //If route requires authentication
      if (to.matched.some((rec) => rec.meta.requiresAuth)) 
        //Check firebase user
        auth.onAuthStateChanged((user) => 
          console.log(user);
          //If the user object does not exist then redirect to the /Login page
          if (!user) 
            router.push("/login");
          
        );
      
    );

如果我现在尝试打开 localhost:8080/dashboard，它会在瞬间显示仪表板，然后跳转到 /login 页面。

如果也尝试使用next(name: 'Login')，但由于某种原因，当我使用 next() 时，我不断收到白页。

希望有人可以帮助我。

谢谢:)

【参考方案1】：

问题在于，不是检查登录用户，而是添加“事件侦听器”auth.onAuthStateChanged.. 它会在身份验证状态更改时触发异步。但是，您需要在这里进行同步检查。最好的办法是使用 vuex 并将您的用户存储在全局状态中。虽然如果你根本不使用 vuex 并且你只需要你的用户，那么路由器中的“本地”用户 var 可能也可以工作.. 像这样：

let user = null
auth.onAuthStateChanged(u => 
   console.log(u)
   if (u) 
     user = u
    else 
     user = null
   
)

router.beforeEach(to => 
  if (to.matched.some(rec => rec.meta.requiresAuth)) 
    //Check firebase user
    if (!user) 
      router.push("/login");
    
  
)

这只是一个概念，但它应该可以工作.. 让我知道 :)

【讨论】：

我刚刚注意到我从未对您的解决方案作出回应，但这实际上是正确的解决方案。最后，我使用了 vuex-persistedstate，因为刷新也删除了用户数据。非常感谢:)