在加載我的路由之前等待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

你如何處理你的反應app中的狀態？ Redux？通量？用手 ？你使用react-router來處理路由嗎？

我想你應該把你的AuthStatus置於你的狀態。然後，您的組件應基於此狀態屬性呈現（或不呈現）。