2016-08-03 1 views
1

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

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

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

答えて

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> 
+0

素敵!認証する親コンポーネントは、子がトークンの状態に基づいて表示するかどうかを担当し、サーバーが「許可されていない」と応答すると、親はそこから何をするかを決定できます(ログインコンポーネントにリダイレクトするなどルート)をすべてマウントします。 – zero

関連する問題