前端的用户角色/权限 - React / GraphQL / Apollo Client

Posted

技术标签:

【中文标题】前端的用户角色/权限 - React / GraphQL / Apollo Client【英文标题】:User Roles / Permissions on Frontend - React / GraphQL / Apollo Client 【发布时间】:2020-12-14 10:09:29 【问题描述】:

最近开始使用 React / Apollo Client / Auth0 / Hasura 并且对处理前端权限有一些疑问。我正在使用 Auth0 来处理我对用户是否登录的授权,并在处理突变/查询时让我的后端设置进行检查。我现在的问题是如何在前端处理它。

用户可以创建一个团队,将信息存储在我的“teams”表中,还可以作为经理或教练在我的“team_staff”表中创建记录。这一切都是直截了当的。我现在要做的是当用户访问时,例如:www.mysite.com/team/update/1 检查用户是否存在于“team_staff”表中,如果不向他们显示错误消息甚至重定向。在查看团队时,还希望根据团队成员是否为员工隐藏某些按钮。

我是否应该在登录时处理此问题,并查询用户所属的所有团队并将其存储在会话/cookie 中,或者每次调用时在该组件内部进行查询/检查?还是我走得太远了,应该换一种方式?

希望这个问题有意义。谢谢!

【问题讨论】:

登录后,您可以查询权限、角色,无论您需要什么......每个视图/组件/甚至按钮都可以useQuery 使用cache-only 读取它获取策略或要求更细化/详细的访问权限 @xadm 感谢您的帮助。最终走这条路。 【参考方案1】:

这个问题很有道理,相信很多开发者都会遇到一些类似的问题。

TLDR; 在componentDidMount 中发出 API 请求以获得正确的权限(当然是在登录之后)。

对于这个问题,我们有很多解决方案,哪个最好,取决于您的基础架构、您的团队等。基本上您需要调用 API 来检查权限,因为您的权限存储在后端。永远不要在前端存储上存储权限,如 session、cookie 等。

我可以提供一些方法。 首先,登录后立即调用API获取权限信息,例如:

获取允许路线列表,然后,每当用户浏览到特定路线时,检查以确保该路线在允许路线列表中。 获取允许的团队列表,如团队 ID 数组,然后在每个路由中,获取团队 ID,检查该团队是否存在于上述列表中。

但我相信您会意识到它们几乎相同,只是您获得的数据以及处理它们的方式不同。两种解决方案完全取决于您。

所有 API 请求都应该放在页面组件的componentDidMount 中,因为您需要确保在后端发生更改后立即正确应用权限。

编码愉快!

【讨论】:

感谢您的回复!经过一些试验和错误(并查看 Redux),我得到了一切工作。

以上是关于前端的用户角色/权限 - React / GraphQL / Apollo Client的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离后的权限控制设计​方案

react_app 项目开发 _角色管理_用户管理----权限管理

前后端分离权限控制设计和实现思路

一文读懂前后端分离权限控制设计和实现思路!

如何在带有 Django Rest 框架的 React 前端使用 Django 用户组和权限

美团一面:说说前后端分离权限控制设计和实现思路?