如何修复 Firebase Auth 仅在刷新后工作？

Posted 2023-02-22

【中文标题】如何修复 Firebase Auth 仅在刷新后工作？

【英文标题】：How do I fix Firebase Auth only working after refresh?

【发布时间】：2019-08-29 03:01:23

【问题描述】：

我正在使用 Firebase 的 signInWithEmailAndPasswordfunction 进行身份验证，然后将 access_token 保存在 localStorage 中，以便我构建的 Vuex getter 检测到用户已登录，最后我让路由器运行到路由器中具有 requiresAuth: true 的 Vue 组件。

但是，它不起作用，因为很明显，loggedIn getter 只有在我刷新页面后才会更改。

我已经正确构建了我的注册和注销功能，但是尽管使用了相同的代码结构，但这个似乎并没有工作： -调用firebase的auth函数 - 然后调用一个内部有路由重定向的promise - 最后（在承诺之外）进行查询（如果适用）（注册时将用户添加到数据库中）。

我最接近的是使用这种稍微交替的结构：

login () 
  firebase.auth().signInWithEmailAndPassword(this.username, this.password).catch(function(error) 
  // Handle Errors here.
  alert(error.code);
  alert(error.message);

  // ...

);
let token = (firebase.auth().currentUser.refreshToken)
localStorage.setItem('access_token', token)
console.log('firebase token: ', token)
this.$router.push( name: 'home' )

我希望我被重定向到需要身份验证的组件。这是在我刷新并单击“主页”按钮后完成的（这需要 loggedIn 为真）。

如何在不刷新的情况下使其工作？

【参考方案1】：

要检测用户身份验证状态的变化，请使用onAuthStateChanged 侦听器，如docs 所示：

firebase.auth().onAuthStateChanged(function(user) 
  if (user) 
    // User is signed in.
   else 
    // No user is signed in.
  
);

此回调将在用户显式登录完成时触发，但也会在页面重新加载时触发。