Reactjs 反应路由器&x2014；在运行时添加/删除路由

我有一个支持每个用户权限的应用程序。因此，如果用户拥有适当的权限，他就能够管理用户、组等。如果用户没有这样的权限，他可能不会这样做

我有一个RESTAPI，带有一个端点，返回当前用户允许的所有链接，有了它，我想为

react路由器

设置路由。如果权限被编辑，例如，用户失去了编辑用户的权限，相应的菜单项应从菜单中消失，路由从路由器中删除。否则，应添加菜单项和路线

现在我有以下设置：

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

ReactDOM.render(
，山）；

但我真正想要的是：一个动态执行此设置的函数，可以在每次权限更改时运行

我找不到任何关于这方面的文件，如果有办法的话，我会很高兴

更新

---

根据给出的答案和评论，我意识到我想要解决这个问题的方法并不符合react router的声明性质。

您可以使用

路由上的
属性进行条件身份验证。您可以检查用户是否具有进入视图的权限，如果没有权限，则将其导航到其他位置

见：


常量isAuth=（下一个状态，替换）=>{
如果（！IsCurrentUserAuthorized）{
替换（{pathname:'/'}）；
}
}  

导航到
/accounts
时会输入
isAuth
方法。显然，你需要把你自己的逻辑放进去，以确定用户是否被授权，但这就是它的jist。只需将未经授权的用户发送到的路径名放入其中。
在我的一个项目中，我有以下设置，我想您会发现它很有用：

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

componentWillMount（）{
let routes=[]；
推({
路径：'/authenticate'，
组件：登录页面
});
推({
路径：“/”，
组成部分：主要，
indexRoute:{component:null}，
getChildRoutes：（错误，回调）=>{
getNavigation（）。然后（（导航）=>{
回调（null，getChildRoutes（导航路径））
})
},
onEnter:（）=>{
getNavigation（）；
让token=getToken（）；
如果（令牌==null | |令牌===''）重定向到验证URL（）；
}
});
这个。路线=路线；
render（）{
返回(
);
}

您可以将路由存储在对象中，也可以传递一个将返回路由的承诺，您还可以通过这种方式轻松检查权限。希望有帮助！
为什么要在运行时执行此操作？通常在登录时为每个用户加载权限。这会让您的生活更轻松。因为用户可以更改权限s、 因此，他可以为不同的路由释放所需的权限。阻止可能是一个解决方案，但删除路由对我来说似乎更干净。如果这不是正确的想法，请让我知道。让某人编辑自己的权限会带来什么期望。什么是业务场景？在编辑权限后，你能强迫他们登录吗？那就是您可以从服务器发送新路由，而不必担心在客户端处理它们。我认为动态添加/删除路由的一个问题可能是，当您的应用程序增长并且您添加了更多路由时，所述路由的可维护性。如果您使用
oneter
，并根据所提供的授权路由列表检查路由从API来看，在将来添加新路由时应该不费吹灰之力。我认为问题不仅在于阻止用户访问，链接也不应该存在。在您的解决方案中，用户似乎仍然可以单击链接。路由逻辑和UI逻辑是分开的。OP仍然可以根据它们的内容有条件地设置UI菜单链接但是，如果有人试图手动访问未经授权的链接，他们将被重定向到别处。我接受了这个答案，因为它给了我更多的帮助。但一般来说，两个给出的答案都指出使用
onEnter
回调，这是解决此问题的首选武器。
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} />
  );
}