时间戳

首页 > 解决方案 > React中的RBAC，如何实现，构想？

javascript - React中的RBAC，如何实现，构想？

问题描述

我需要在 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 {}

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

标签： javascriptreactjsauthenticationrbac

解决方案

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

推荐阅读