React-Router- 런타임에 경로 추가/제거

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 방법이 입력됩니다. 분명히 사용자가 권한이 있는지 여부를 결정하기 위해 자신 만의 논리를 넣어야 할 것입니다.하지만 그 점이 바로 그 것입니다. 권한없는 사용자에게 보낼 곳의 경로 이름을 지정하기 만하면됩니다. 내 프로젝트 중 하나