React中的RBAC,如何实现,构想?

问题描述 投票:0回答:3

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

你对此有何看法?也许有一些更好的方法来收集和处理权限?

javascript reactjs authentication rbac
3个回答
7
投票

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


3
投票

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

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

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

我写了一篇博客,其中包含完整的工作示例。

你可以看看。如果您仍需要更多信息或任何含糊之处,请告诉我。

RealMelon 教程 - 如何在 ReactJS 中创建 RBAC(基于角色的访问控制)


0
投票
© www.soinside.com 2019 - 2024. All rights reserved.