リアクタ - ルータ - 実行時のルートの追加/削除

Question

私は各ユーザの特権をサポートするアプリケーションを持っています。したがって、ユーザが適切な許可を得なければならない場合、ユーザ、グループなどを管理することができます。ユーザーがそのような許可を得ていない場合、ユーザーはそれをしない可能性があります。

私は残りのapiを持っています。エンドポイントは、現在のユーザの許可されたリンクをすべて返しています。それで、react-routerのルートを設定したいと思います。権限が編集され、ユーザがユーザを編集する権限を失った場合、メニュー項目はメニューから消え、ルータからルートが削除されます。それ以外の場合は、メニュー項目とルートを追加する必要があります。

今私は、このセットアップを持っている：

ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={Window}> 
     <IndexRoute component={Users} /> 
     <Route path="users" component={Users} /> 
     <Route path="groups" component={Groups} /> 
     <Route path="permissions" component={Permissions} /> 
     <Route path="*" component={Error} /> 
     </Route> 
    </Router> 
    </Provider>, mount); 

しかし、私は本当に持っているしたいです：動的にこの設定を行い、アクセス権を変更するたびに実行することができます機能。

これに関するドキュメントが見つかりませんでした。その方法があれば嬉しいです。

UPDATE

与えられた回答やコメントによると、私はこの問題に取り組むために望んでいた道が反応し、ルータの宣言自然と一緒に行かないことに気づきました。

Answer 1

、私はあなたがそれが便利でしょうと思う：

componentWillMount() { 
    let routes = []; 

    routes.push({ 
    path: '/authenticate', 
    component: LoginPage 
    }); 

routes.push({ 
    path: '/', 
    component: Main, 
    indexRoute: { component: null }, 
    getChildRoutes: (error, callback) => { 
    getNavigation().then((nav) =>{ 
     callback(null, getChildRoutes(nav.paths)) 
    }) 
    }, 
    onEnter:() => { 
    getNavigation(); 
    let token = getToken(); 
    if (token == null || token === '') redirectToAuthenticationUrl(); 
    } 
}); 

this.routes = routes; 

render() { 
    return (
    <Router key={uuid()} history={history} routes={this.routes} /> 
); 
} 

あなたがオブジェクトにあなたのルートを保存し、またあなたのルートを返します。約束を渡すことができ、この方法で権限を簡単に確認することもできます。希望が助けてくれる！

Answer 2

RouteのonEnter小道具を条件付き認証に使用することができます。ユーザーがビューに入る権限を持っているかどうかを確認できます。権限がない場合は、他の場所に移動できます。

参照：/accountsに移動するときhttps://github.com/ReactTraining/react-router/blob/master/docs/API.md#onenternextstate-replace-callback

<Route path='/accounts' component={Accounts} onEnter={isAuth} /> 

const isAuth = (nextState, replace) => { 
    if (!isCurrentUserAuthorised) { 
    replace({pathname: '/'}); 
    } 
} 

isAuth方法が入力されます。明らかに、ユーザーが権限を持っているかどうかを判断するためには、独自のロジックを入れておく必要がありますが、それはそのロジックです。許可されていないユーザーに送信する場所のパス名を入力してください。私は次のセットアップを持っている私のプロジェクトの一つで