Question

前提条件

$ npm install --save firebase@4.11.0

问题

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

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

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

我该如何处理这个问题？

更新

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

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

在登录页面中，我实现了身份验证方法。如果登录成功完成，则用户将被重定向到＆＃39; / main＆＃39;。

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

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

我的问题

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

e.g。

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

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

解决方法

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

Answer 1

您没有致电onAuthStateChanged。相反，当验证状态发生变化时，您会告诉Firebase呼叫您，这可能会在重新加载页面时发生几次

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

Answer 2

它有时为空且有时不为空的事实可能指向异步问题。你在上面的if语句中进行检查了吗？对用户的所有引用都应该在回调中。如果全部检出，可能会检查是否正确启动了身份验证。

Answer 3

onAuthStateChanged是firebase文档中所述的观察者，当auth状态发生变化时会触发，如用户登录，注销，pwd更改。要检查用户是否已登录，您应该使用firebase.auth（）。currentUser，它将为您提供当前登录用户。正如你所说的你的状态是本地firebase.auth（）。除非用户退出，currentUser总是会给你用户。

有时firebase.auth（）。onAuthStateChanged在刷新页面

前提条件

问题

更新

我的问题

解决方法

3 个答案: