有时 firebase.auth().onAuthStateChanged 在我刷新页面时返回 null 的用户 [英] Sometimes firebase.auth().onAuthStateChanged returns user of null when I refresh the page

问题描述

$npm install --save firebase@4.11.0

$npm install --save firebase@4.11.0

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

I'm using firebase authentication on my web application. In my app, I implemented onAuthStateChanged for client side js like below.

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

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

After login, I confirmed this method will return actual user obj, but if I refresh the page, then user might be null. Curiously, sometimes user won't be null. I'm afraid there are some limitation of calling onAuthStateChanged, but currently I have no idea.

我该如何处理这个问题?

How should I deal with this issue?

让我分享我的最小例子.

Let me share my minimal example.

我的应用程序正在使用 express.js.有两个 URL，如下所示.<代码>/登录/main

My app is working with express.js. There are two URLs like below. /login /main

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

In the login page, I implemented authentication method. If the login is successfully finished, then user will be redirected to '/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 只检查用户是否登录.

In the main page, there is no login method. main.js is only checking whether user is logged in.

//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 将自动使用用户信息触发，但不会按我预期的那样工作.我确定登录信息的持久性是正确的，因为官方文档说Web客户端的默认设置是LOCAL.

I think login status is stored on LocalStorage of web browser. This means that, after finishing loading of main.js, onAuthStateChanged will be automatically fired with user information, but not working as I expected. I'm sure that persistence of login information is correct because official document says the default setting is LOCAL for web client.

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

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

Should I implement onAuthStateChanged with another way? How can I ensure user is logged in after reload?

例如

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

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

Or could you show me the correct way?

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

I decided to remove session and set redirection to login page if null is returned. This is not a solution, but a workaround currently...

推荐答案

您不是在调用 onAuthStateChanged.相反，您告诉 Firebase 在身份验证状态更改时调用您，这可能会在页面重新加载时发生几次

You're not calling onAuthStateChanged. Instead you're telling Firebase to call you when the authentication state changes, which may happen a few times when the page is being re-loaded

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

When a page is getting loaded and there was previously a user signed in, the auth state may change a few times, while the client is figuring out if the user's authentication state it still valid. For that reason, you may see a call with no user before seeing the final call with the actual signed in user.

这篇关于有时 firebase.auth().onAuthStateChanged 在我刷新页面时返回 null 的用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！