React-Router—Add/remove 运行时路由

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

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

我找不到任何相关文档，如果有办法做到这一点，我会很高兴。

更新

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

Answer 1

您可以在 Route 上使用 onEnter 道具进行条件验证。您可以检查用户是否有权进入视图，如果他们没有，则将他们导航到别处。

参见：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: '/'});
  }
}

导航到/accounts时进入isAuth方法。显然，您需要加入自己的逻辑来确定用户是否获得授权，但仅此而已。只需输入您希望将未经授权的用户发送到的路径名即可。

Answer 2

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

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

您可以将您的路由存储在一个对象中，并传递一个将 return 您的路由的承诺，您还可以通过这种方式轻松检查权限。希望有帮助！

React-Router—Add/remove 运行时路由

React-Router—Add/remove Routes at runtime

reactjs

react-router

redux

react-redux

react-router-redux