javascript - 在加载我的路线之前等待 onAuthStateChanged

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

你如何处理你的 React 应用程序中的状态？终极版？通量？用手 ？你使用react-router来处理路由吗？

我认为您应该将您的 AuthStatus 放在您所在州的某个位置。然后你的组件应该根据这个状态属性来渲染(或不渲染)。