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

【问题标题】：Apply role based restrictions to custom routes将基于角色的限制应用于自定义路由
【发布时间】：2021-12-10 07:37:21
【问题描述】：

我按照 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 组件的路由，因为它们是未定义的。

有人可以帮我解决这个问题吗？

提前谢谢你。

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

你好丹尼尔。

我找到了您想要完成的解决方案。

您应该创建一个像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可以在here找到。

扩展：我正在检查当前用户拥有的角色是否包含在提供给组件的可用权限数组中。

用法：

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

【讨论】：