React-Router-在运行时添加/删除路由

我有一个支持每个用户权限的应用程序。所以如果用户需要适当的权限，他可以管理用户，组等。如果用户没有这样的许可，他可能不会那样做。React-Router-在运行时添加/删除路由

我有一个休息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

根据给定的答案和评论，我意识到，这样我想解决这个问题不会反应路由器的声明自然走。

来源

2017-01-17 philipp

为什么你想在运行时做到这一点？通常应该在登录时为每个用户加载权限。这让你的生活变得更轻松。 – Geethanga

因为用户可以更改权限，所以他可以放弃所需的不同路由权限。阻止可能是一个解决方案，但删除路线似乎对我来说更清洁。如果这不是正确的想法，请告诉我。 – philipp

你希望让别人编辑自己的权限，你期待什么？什么是业务场景？你可以强制他们在编辑权限后登录吗？这样你就可以从服务器发送新的路由，而不用担心在客户端处理它们。 – Geethanga

在我的项目之一，我有一个下面的设置，我想你会发现它有用：

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} /> 
); 
}

您可以将路线存储在一个对象，并且还通过了一个承诺，将返回你的路线，您也可以通过这种方式轻松检查权限。希望有所帮助！

来源

2017-01-17 09:56:43 Mateusz

我接受了这个答案，因为它给了我更多的帮助。但总的来说，两个回答都指出要使用'onEnter'回调函数，它是这个问题的首选武器。 – philipp

您可以在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方法。很明显，你需要将自己的逻辑放在确定用户是否被授权的情况下，但这是它的主题。只需要提供一个路径名称，您可以将未经授权的用户发送到该路径。

来源

2017-01-17 09:22:51 Tom

我认为这个问题不仅阻止用户访问，链接也不应该在那里。在你的解决方案中，用户似乎仍然可以点击链接。 – Geethanga

路由逻辑和UI逻辑是分开的。 OP仍然可以根据他们从API获得的内容，有条件地设置UI菜单链接，但如果有人要手动尝试访问未经授权的链接，他们将被重定向。 – Tom

React-Router-在运行时添加/删除路由

回答

相关问题