有时firebase.auth().onAuthStateChanged在刷新页面时返回null用户

Question

前提

$ npm install --save firebase@4.11.0

问题

我在我的Web应用程序上使用firebase身份验证.在我的应用程序中,我实现onAuthStateChanged了如下的客户端js.

firebase.auth().onAuthStateChanged((user) => {
  if(user) {
    //logged in
  } else {
    //do sth
  }
});

登录后,我确认此方法将返回实际用户obj,但如果我刷新页面,则用户可能为null.奇怪的是,有时用户不会为空.我担心调用onAuthStateChanged有一些限制,但目前我不知道.

我该如何处理这个问题？

更新

让我分享一下我的最小例子.

我的应用正在使用express.js.有两个网址,如下所示. /login /main

在登录页面中,我实现了身份验证方法.如果登录成功完成,则用户将被重定向到"/ main".

//login.js
import firebase from 'firebase';
var config = {...};
firebase.initializeApp(config);

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((result) => {
  return result.user.getIdToken(true);
}).then((idToken) => {
  if(idToken) {
    location.href = '/main';
  }
});

在主页面中,没有登录方法.main.js仅检查用户是否已登录.

//main.js
import firebase from 'firebase';
var config = {...};
firebase.initializeApp(config);

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    //initialize main page.
  } else {
    location.href = '/login';
  }
}

我认为登录状态存储在Web浏览器的LocalStorage上.这意味着,在完成main.js的加载后,onAuthStateChanged将自动触发用户信息,但不能按预期工作.我确信登录信息的持久性是正确的,因为官方文档说默认设置是LOCAL针对Web客户端的.

https://firebase.google.com/docs/auth/web/auth-state-persistence

我的问题

我应该用另一种方式实现onAuthStateChanged吗？如何确保用户在重新加载后登录？

例如

import $ from 'jquery';
$(document).on('ready', () => {
  onAuthStateChanged((user) => {...});
});

或者你能告诉我正确的方法吗？

解决方法

如果返回null,我决定删除会话并将重定向设置为登录页面.这不是解决方案,而是目前的解决方法......

Answer 1

你不是在打电话onAuthStateChanged。相反，您告诉 Firebase在身份验证状态更改时给您打电话，这可能会在页面重新加载时发生几次

当页面正在加载并且之前有用户登录时，身份验证状态可能会更改几次，而客户端正在确定用户的身份验证状态是否仍然有效。因此，您可能会在看到与实际登录用户的最终通话之前看到没有用户的通话。