将基于角色的限制应用于自定义路由

Question

我按照marmelab文档来应用角色库限制：https://marmelab.com/react-admin/doc/3.4/Authorization.html。

我已经成功地应用到我的资源部分：“限制对资源或视图的访问”和我的菜单部分：“限制对菜单的访问”。但是，关于我认为文档中缺少并且还没有找到解决方案的事情，就是如何将这种类型的限制应用于customRoutes。

function App() {
  return (
  <Admin
      theme={MyTheme}
      layout={MyLayout}
      history={history}
      customRoutes={[
       <PrivateRoute
        exact
        path="/system-status"
        component={props => <SystemStatusScreen {...props} />}
       />,
       <PrivateRoute
        exact
        path="/social-media"
        component={props => <SocialMediaScreen {...props} />}
      />,
      }
      catchAll={NotFound}
      authProvider={authProvider}
      loginPage={LoginPage}
      dataProvider={dataProvider}
  >
...

React-admin允许定义一个usePermissions函数来检索权限，但是这些权限没有加载到标记之外，因此我无法预先计算传递给Admin组件的路由，因为它们是未定义的。

有人能在这个问题上帮我吗？

提前谢谢你。

Answer 1

你好，Daniel__。

我找到了你想要完成的事情的解决方案。

您应该创建像PrivateRoute这样的自定义组件，为了防止从React-Admin提供的usePrivileges钩子中进行未定义的开始，您应该检查是否安装了该组件。

import { FC } from 'react';
import { Route, Redirect, RouteProps } from 'react-router';
import { useAuthorization, useIsMounted } from 'src/lib';
import { Spinner } from 'src/components';
import { PrivateRouteProps } from './PrivateRoute.props';

const PrivateRoute: FC<PrivateRouteProps & RouteProps> = ({ privileges, ...props }) => {
  const { permissions: role } = useAuthorization();
  const isMounted = useIsMounted();

  if (!isMounted()) return <Spinner screen />;

  return privileges.includes(role) ? <Route {...props} /> : <Redirect to="/" />;
};

export default PrivateRoute;

自定义钩子useIsMounted可以找到这里。

Extended:我正在检查当前用户所扮演的角色是否包含在一个数组中，该数组为组件提供了可获取的特权。

使用：

<PrivateRoute
  exact
  path="/add-user"
  component={CreateUser}
  key={1}
  privileges={['super', 'admin']}
/>