リアクタ認証非同期

Question

私は反応が新しくなりました。

私は私のroutes.jsで実装私の非同期ルートにいくつかのセキュリティを追加したい：あなたが見ることができるように

import React from 'react'; 
import App from './app.jsx'; 
import Home from './components/home.jsx'; 

import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 

function loadRoute(cb) { 
    return (module) => cb(null, module.default); 
} 

const routes = { 
    component: App, 
    childRoutes: [ 
     { 
      path: "/", 
      component: Home 
     }, 
     { 
      path: "/hello/:foo", 
      getComponent(location, cb) { 
       System.import('./components/hello.jsx') 
        .then(loadRoute(cb)) 
        .catch(errorLoading); 
       } 
     }, 
    ] 
}; 

export default() => <Router history={hashHistory} routes={routes} /> 

「/ハロー/：をfoo」というルートが非同期です。

このルートへのアクセスを制限（役割ベース）し、別の場所（ログインなど）にリダイレクトするにはどうすればよいですか。

チャンクは、必要なときにロードしたいと思います。

「getComponent（）」にチェックコードを入れる必要がありますか？

"willTransitionTo（）"で実行できますか？この関数は "getComponent（）"より前に実行されますか、どのように実装する必要がありますか？

Answer 1

チェックコードをcomponentWillMount（）に配置し、render（）でページコンポーネントを返すか、ログインするように表示/リダイレクトします。

アクセスが制限されているページが複数ある場合、レンダリング前にアクセスを確認するために各ページコンポーネントのハイレベルコンポーネントオーダーを作成します。