如何在React.Js中实现基于角色的权限

Question

我想在React中实现基于角色的权限。我有三个不同的角色。

1. 操作员
2. 监督员
3. 管理员

每个角色都有特定的权限。示例：操作员可以查看用户表单，但不能编辑用户。主管可以编辑表单，但不能删除用户。这只是一个例子。我有20-25个不同的权限(canView/canEdit(。

enum permission = {
viewUser,
editUser,
viewReport,
modifyReport,
etc..
}

发布数据：｛permissionType:permission.viewUser｝//当用户登录时，后端将已经在服务中存储了用户角色和id，因此无需传递。

响应可能看起来像：｛canView:true，canEdit：false｝

我的问题：我在哪里以及如何创建枚举和共享服务(在一个地方进行API调用(，以便所有组件都可以使用该共享服务来获取权限并将结果返回到组件？我不想一次获得所有权限。一旦我加载组件，我就想进行API调用并获得特定的权限。

Answer 1

您可以为此创建一个单独的文件(例如permission.jsx(，并在任何需要的模块中导入

但我想，这不是你的问题，越清楚越好。

另一个建议是创建一个授权组件，并将所有需要权限的组件封装在周围