1

我正在尋找一種方式,當用戶授權時,我存儲user authorized status所以我每次都可以檢查用戶是否是authorized。然而,當我執行下面的代碼未授權用戶:(Master.jsx - >渲染())存儲用戶的反應授權

<Route exact path="/" render={() => { 
    console.log('this.props.authed: ', this.props.authed, "this.props: ", this.props) 
    return (
    this.props.authed 
    ? <Home /> 
    : <Redirect from="/" to="/login"/> 
)} 
}/> 

我通過firebasecomponentWillMount()檢查用戶授權和存儲它下面的代碼:(Master.jsx - > componentWillMount())

componentWillMount =() => { 

    firebaseAuth().onAuthStateChanged((user) => { 

     if (user) { 
     this.props.login(user) 
     } else { 
     this.props.logout() 
     } 
     }) 
} 

的問題是,將後<Route ..所以用戶將被routing後授權componentWillMount將被執行。我有什麼辦法解決它?

回答

0

這是react-redux的經典用例。我建議所有的認證都在服務器端進行處理,服務器對授權或未授權用戶進行真或假響應。在此之前,您可以在用戶界面上顯示加載圖標。

但是,如果您想繼續並希望在UI上驗證用戶身份,請查看react-redux。

從本質上講,你將有

  1. 在action.js派遣登錄動作
  2. 趕上登錄動作在你reduce.js和商店要做到這一點

    當用戶登錄商店中的用戶憑證

當用戶重新加載/打開頁面

  1. 調度在action.js一個isLoggedIn行動
  2. 減少isLoggedIn行動,並檢查用戶的狀態已經存在。如果是,返回允許程序繼續。如果否,請求用戶再次登錄。

希望有所幫助!

+0

如果您看到我的問題,問題是我的存儲處理器將在調用react-router後執行。因此,在我將用戶數據存儲在用戶被授權'react-router'重定向到另一頁的redux商店之前! –