有时,当我刷新页面时,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,但是如果刷新页面,则user可能为null. 奇怪的是,有时用户不会为空. 恐怕调用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.
/login
/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屋!