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

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

接线员

主管

管理员

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

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

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

响应可能如下所示：{canView:true，canEdit:false}

---

我的问题：在哪里以及如何创建枚举和共享服务（在一个位置进行API调用），以便所有组件都可以使用该共享服务获取权限并将结果返回给组件？我不想一次获得所有权限。加载组件后，我希望进行API调用并获得特定权限。

您可以为此创建单独的文件（例如permission.jsx）并导入所需的任何模块

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

---

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

我的问题是如何以及在何处创建枚举和共享服务（我想在其中放置权限API调用）。所以其他组件可以导入该服务并在整个应用程序中使用。