如果用户已经使用 Vue 和 Firebase 身份验证登录，如何自动重定向用户？

Posted 2023-02-22

【中文标题】如果用户已经使用 Vue 和 Firebase 身份验证登录，如何自动重定向用户？

【英文标题】：How do I automatically redirect the user if they are already logged in using Vue and Firebase authentication?

【发布时间】：2021-06-12 15:34:43

【问题描述】：

说明

如果用户已经登录，我会尝试自动将用户路由到“Games.vue”组件。对于身份验证，我使用 Firebase 并检查他们是否使用以下方式登录：

var user = firebase.auth().currentUser;

if (user) 
  // User is signed in.
 else 
  // No user is signed in.

我希望用户在已经登录的情况下看不到登录页面。因此他们被直接带到游戏页面。我不知道如何使用 Vue 来实现这一点。我需要在登录后重定向的登录组件之前运行一些东西。

尝试解决方案

我知道如何解决此问题的唯一方法是显示登录页面，检查 Firebase 用户是否已登录，然后转到游戏页面。这可以工作，但这不是我正在寻找的行为。我正在使用Vue路由器。感谢您的帮助。

【参考方案1】：

我建议像这样使用 VueRouter 全局守卫：

const router = new VueRouter( ... )

router.beforeEach((to, from, next) => 
  if (!user) 
    next('login');
   else 
    next();
  
)

话虽如此，那么您需要一种方法来指定需要身份验证的路由。我建议像这样使用路由元字段：

routes = [
  
    name: 'login',
    path: '/login',
    meta: 
      requiresAuth: false
    
  ,
  
    name: 'games',
    path: '/games',
    meta: 
      requiresAuth: true
    
  
]

现在你的守卫变成了：

if (!user && to.meta.requiresAuth) 
  next('login');
 else 
  next();

Vue 路由器为此用例提供了一个示例，请查看the documentation。

提示：确保使用 Firebase onAuthStateChanged 方法订阅身份验证更改。

let user = firebase.auth().currentUser;
firebase.auth().onAuthStateChanged(function(user) 
  user = user;
);

编辑：要在登录后重定向，只需注意身份验证更改并使用router.push 重定向。

auth.onAuthStateChanged(newUserState => 
  user = newUserState;
  if (user) 
    router.push("/games");
  
);

【讨论】：

它的作用是检查用户是否存在，如果需要身份验证并且不存在用户，则将您带到登录页面。这很好，但我想要完成的是，如果您已登录，则将登录重定向到游戏。

我编辑了登录后重定向的答案。

完美。谢谢！