`onEnter`でコンポーネントレンダリングを遅らせることができますか？

Question

以下のように、また"auth-flow" exampleに示されているように、React Router onEnter属性を使用して認証を処理しています。

function requireAuth(nextState, replace, next) { 
    Auth.validateToken() 
     .then(() => { 
     next(); 
     }) 
     .fail(() => { 
     replace('/login'); 
     next(); 
     }); 
    } 

    <Router history={history}> 
     <Route path="/" component={App} > 
     <IndexRoute 
      component={Dashboard} 
      onEnter={requireAuth} 
     /> 
     <Route 
      path="login" 
      component={LogInForm} 
     /> 
     </Route> 
    </Router> 

私のトークン検証は、サーバーの呼び出しを必要とするので、私はonEnterの非同期コールバック機能を使用しています。

私が遭遇している問題は、この例のDashboardコンポーネントは、next()が呼び出される前に/マウントをレンダリングすることです。理想的には、レンダリングはコールバックが起動するまで待機します。

私はこれがどのように機能するのか誤解していますか？特定の条件が成立するまでルートコンポーネントの描画を遅らせる方法はありますか？

Answer 1

経路のレンダリングを遅らせてはいけませんが、ユーザーの方がより効果的です。

実際にページをレンダリングするには、誰かがそれを見る権限を持っているかどうかを見るためのロジックが含まれていて、authorized: falseなどのようなものがあり、コールバックスイッチthis.setState({ authorized: resultFromCallback })を使用してください。状態変化が原因となること

値は異なっていた場合、あなたのページ、に再びrender()を呼び出すに反応して、あなたのページのrender()機能で、あなたは単にあなたが含まれているUIをユーザに提示する必要があるかどうかを確認するためにthis.state.authorizedをチェック匿名ユーザーとして表示する必要があるすべてのビット、または許可ユーザーとして表示する必要があるすべてのビット。

... 
    componentDidount() { 
    whateverlib.checkForAuthorization(this.handleAuthorization); 
    }, 
    handleAuthorization(authorized) { 
    this.setState({ authorized }); 
    }, 
    render() { 
    if(this.state.authorized) { 
     return this.renderAuthorizedUI(); 
    } 
    return this.renderAnonymousUI(); 
    }, 
... 

また、あなたのアプリはまだちょうどJavaScriptがWebページ上で実行されているので、なぜあなたも、あなたがロードすべてのページをチェックすることを覚えていますか？あなたがする必要があるのは、ページをチェックし、その結果を保存して完了することだけです。ユーザーがタブを開いたままにしておくと、認可状態が1つの反応ルータのアプリケーション管理ページから次のページに自動的に変更されるわけではないため、アプリグローバルトラッカーを使用できます。

var authorizer = require('./lib/whatever-thing-you-wrote-for-this'); 

var YourPage = React.createClass({ 
    ... 
    componentDidMount() { 
    if (!authorizer.isAuthorized()) { 
     authorizer.tryAuthorize(this.handleAuthorization); 
    } 
    }, 
    handleAuthorization() { 
    this.forceUpdate(); 
    }, 
    render() { 
    if(authorizer.isAuthorized()) { 
     return this.renderAuthorizedUI(); 
    } 
    return this.renderAnonymousUI(); 
    }, 
    ... 
});