Question

我需要在React应用程序中实现RBAC。我已经读过文章https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/，并且了解它是如何完成的，但是我不了解的一件事是如何自动收集有关所有受保护操作的信息以编辑角色（添加这些权限并删除）？

我明白了：我将某些受保护的动作包装在一些HOC中，并检查用户是否可以看到它。现在让我们从另一个角度来看这件事。我需要具有配置角色的能力。我打开编辑器，为角色创建名称，并想向用户添加一些权限。我应该从某个地方选择它们，这样，我想要实现RBAC的所有动作的列表（日志，表-如您所愿）就成为我的宇宙中心。这样，每当我需要一个受保护的按钮（路线）时，都应将其ID添加到一些列表中。这是复杂的，不必要的操作。我可以使用什么机制来避免使用上述动作列表？

我的想法是：对于受保护的组件，我给它们起了一些后缀-sec（Component-sec.js）。在它们内部，我创建了带有名称和描述的属性。然后，在管理页面中，我将显示所有具有后缀的权限（通过分析其名称，如何？我从未在JS中使用反射），并显示其名称和说明（名称和说明属性）。这是关于配置中的自动化。如果要谈论允许和拒绝工作，在这里我可以使用一些HOC（AuthComponent）来检查权限。

class MyComponent extends AuthComponent {}
class AuthComponent extends React.component {}

您如何看待？也许有一些更好的方法来收集和处理权限？

Answer 1

前端授权还不够。您还需要后端授权，以避免攻击者绕过您的前端。一个好的做法是，对前端身份验证和后端身份验证使用完全相同的技术。我建议使用Casbin，因为它支持前端JS和后端语言，例如Go，Java，Node.js，Python。因此，您无需对前端和后端使用不同的权限机制。

Answer 2

我不确定它是否会直接为您提供帮助。

但是我已经以我的自定义方式实现了RBAC。我控制了以下事情。

按钮和动作
页面和重定向
模块和路由守卫。

我写了一个带有完整工作示例的博客。

您可以看看。如果您仍然需要更多信息或有任何歧义，请告诉我。

RealMelon Tutorial - How to create RBAC (Role based Access Control)in ReactJS

RBAC在React中如何实现，构想？

2 个答案: