React中的RBAC，如何实现，构思？

Question

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

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

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

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

你怎么看？也许有一些更好的方法来收集和处理权限？

Answer 1

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

使用不同的权限机制

Answer 2

我不确定它是否会直接帮助你。

但我已经以我的自定义方式实现了 RBAC。我控制了以下东西。

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

我写了一篇博客，里面有一个完整的工作示例。

你可以看看。如果您还需要更多信息或有任何不明确之处，请告诉我。

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

React中的RBAC，如何实现，构思？

RBAC in React, how to implement, conception?

javascript

authentication

rbac

reactjs