ajaxレスポンスに基づいた反応ルータの初期ルート

Question

私のアプリでは、私は管理ページのためにprivelegeを持っています。ログイン後、私はこの特権を持っているユーザーに対してのみこのページへのアクセスを許可します。

アプリケーションが登録される前に、ajaxを使用してコンポーネントのルートを読み込む方法はありますか？ いくつかのアクション（ログインなど）後にコンポーネントのルートを変更する方法はありますか？ この問題を解決するためのベストプラクティスは何ですか？

Answer 1

exampleがreact-routerレポにあります。彼らは、承認をチェックするonEnterプロパティを使用します。onEnter小道具はルートに入る前に呼び出される関数です

<Router history={withExampleBasename(browserHistory, __dirname)}> 
    <Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Router> 

：

：

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

フォーカス取得時の機能は、次のコールサインを持っています

これにより、ユーザーに管理者権限があるかどうかを確認するための状態にアクセスできます。

多くの場合、議論されているアプローチは高次のコンポーネントを使用しています。管理者権限を必要とするコンポーネントは、そのことを知る必要はありませんが、アクセスを制限するコンポーネントによってラップされています。

いくつかのより多くの情報：

https://blog.tighten.co/react-101-routing-and-auth
https://github.com/joshgeller/react-redux-jwt-auth-example
https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/

は、いつものように、クライアントは、信頼すべきではないとのデータがサーバー上に確保する必要があります。