为 Admin-On-Rest 添加基于角色的访问控制

Adding Role based access control for Admin-On-Rest

我正在使用 Marmelab Admin-On-Rest 创建一个应用程序来创建一个应用程序,让一组用户编辑、绘图、安排、发布并最终跟踪一组博客文章。

想要根据每个团队的角色向他们展示自定义视图。

有什么方法可以使用 Admin-On-Rest 实现吗?理想情况下,我想使用默认的 Admin-On-Rest,而不是从头开始创建我自己的 Redux 和 React 应用程序。

除了 authClient 之外,您可能还必须至少制作一个自定义减速器。然后做一个ForRole组件连接redux,类似于Admin-on-rest中的Responsive组件

检查里面的角色,让它显示每个角色需要什么

我认为这是一个相当普遍的场景。我正在考虑以下解决方案:

使用 hasRole 方法扩展 authClient。

提供一个 withRoles 高阶函数,将 authClient 和对象映射角色映射到视图组件。

用法为:

import React from 'react';

import { simpleRestClient, Admin, Resource } from 'admin-on-rest';
import withRoles from 'aor-roles';

import { PostCreateForTeam1, PostCreateForTeam2 } from './posts';

const App = () => (
    <Admin restClient={simpleRestClient('http://path.to.my.api')}>
        <Resource name="posts" list={PostList} create={
            withRoles(authClient, {
                team1: PostCreateForTeam1,
                team2: PostCreateForTeam2,
            })
        } />
    </Admin>
);

export default App;

其中 team1team2 是角色。有趣的是,authClient.hasRole 可以是异步的,因此它可以使用 API 检查角色(我正在考虑用于身份验证和角色检查的 SASS 服务)。正确处理这个问题可能很棘手。

给我几天时间考虑一下:)

编辑:找到 API 我很满意。

authClient 必须管理一个新类型:AUTH_GET_ROLE 这将 return 承诺解析为用户角色。

export const ProductEdit = props => (
    <SwitchRoles authClient={authClient} {...props}>
        <ForRole role="role1">
            <ProductEditRole1 />
        </ForRole>
        <ForRole role="role2">
            <ProductEditRole2 />
        </ForRole>
    </SwitchRoles>
);

ForRole 组件的 role prop 也接受一个函数来进行更复杂的检查。

我们刚刚发布了 aor-permissions !