私が真を返さない限りコンポーネントの取り付けを延期する

Question

私はPersonCreateというコントローラを持っています。このコンポーネントでは、認証されたユーザー（this.props.app.session.user.role.isAdmin()）の役割をチェックし、値に応じて何らかのフォームをレンダリングする必要があります。

問題は、セッションオブジェクトを生成するのに時間がかかることです。 http://.../person/createのエンドポイントを参照すると、セッションがまだ生成されていないため、NULLポインタ例外をスローするthis.props.app.session.user.role.isAdmin()を呼び出しようとします。

ルーターファイルは次のようになります。

class RootComponent extends React.Component<any, any> { 

    private generateSession() { 
    store.dispatch(SessionActions.generate()); 
    } 

    public render() { 
    return (
     <Router history={browserHistory}> 
     <Route path="/" component={Layout}> 
      <Route path="app" onEnter={this.generateSession}> 
      <Route path="person"> 
       <Route path="create" component={PersonCreate} /> 
       <Route path="update/:id" component={PersonUpdate} /> 
       <Route path="delete/:id" component={PersonDelete} /> 

    ... 

基本的にstore.dispatch(SessionActions.generate())はasyncronousもののシリーズを行いSagaを生成しました。 （トークンの検証、セッション情報の取得、ローカルストレージのリフレッシュなど）。完了後にコンポーネントのレンダリングを開始する必要があります。

アイデア？

Answer 1

あなたはこのようRootComponentのチェックを使用することができます。

public render() { 
    if (!this.props.app.session) { 
    return null; 
    } 

、それは、セッションが初期化されます後にのみ、ルートをレンダリングします。

PersonCreateコンポーネントでも同様のチェックを使用できます。

Answer 2

レンダリング用のログインを含むReact Componentを作成できます。このコンポーネントは、ユーザー情報を必要とするすべてのルートをラップします。 https://medium.com/the-many/adding-login-and-authentication-sections-to-your-react-or-react-native-app-7767fd251bd1