"gated"反応コンポーネントを作成する

Question

私はRefluxルーターを使用しているアプリケーションを持っていて、私はアプリケーションの管理専用領域を作成したいと思います。 私が達成しようとしているのは、ユーザーがアプリケーションのゲートされた部分にアクセスして、アプリケーションの一部がユーザーにそのコンポーネントにアクセスする権限があるかどうかを確認するAPI呼び出しを行うときです。サーバー）、許可されていない場合はログインコンポーネントにリダイレクトされます。

しかし、私はリアクション内のベストプラクティスで謎を解いてきました。 reactによると、componentWillMountではなく、Ajax（またはこの場合はAPI呼び出し）をではなく実行する必要がありますが、そのベストプラクティスに従うとリアクションライフサイクルについて理解してから、コンポーネントはユーザーの前にレンダリングできます特にサーバの待ち時間が十分に速くない場合には非常に望ましくない。

反応の中でこのようなことを処理するにはどうすればよいでしょうか？

Answer 1

トークンが承認された後に表示する正確なコンポーネントに対してajaxリクエストを行う必要はありません。プライベート情報をラップするコンポーネントなど、任意のコンポーネントにすることができます。そして、どこか別の

class AuthWrapper extends Component { 
    componentDidMount() { 
    ajax(url).then(token => { 
     if (token) this.setState({ token }) 
     else redirect() 
    }) 
    } 

    render() { 
    return (
     <div> 
     {this.state.token && this.props.children} 
     {!this.state.token && <div>Fetching...</div>} 
     </div> 
    ) 
    } 
} 

：

<AuthWrapper> 
    <YourPrivateComponent /> 
<AuthWrapper>