Question

我正在尝试创建一个跟踪用户身份验证状态的模块。它目前看起来像这样：

import FbApp from './firebase-app';
var AuthStatus = {
    LoggedIn: false,
    Username: null,
    Loaded: false
};

const auth = FbApp.auth();

auth.onAuthStateChanged(firebaseUser => {    
    if(firebaseUser){
        console.log("user authed!");
        AuthStatus.LoggedIn = true;
    }else{
        AuthStatus.LoggedIn = false;
    }
    if(!AuthStatus.Loaded){
        AuthStatus.Loaded = true;            
    }
});

export default AuthStatus;

我将AuthStatus导入到我的许多组件中，但唯一的问题是在我的整个路由加载之前这不会触发，因此它在第一次加载页面时始终显示为AuthStatus.LoggedIn = false 。在我开始导航到其他路线后，它工作正常，但只是第一页加载总是返回false，因为onAuthStateChanged尚未被触发。我能解决这个问题的方法是什么？

Answer 1

你如何处理反应中的状态？ Redux？助焊剂？用手？你使用react-router来处理路由吗？

我认为你应该把你的Score放在你所在的州。然后，您的组件应基于此状态属性呈现（或不呈现）。

在加载我的路由之前等待onAuthStateChanged

1 个答案: