前端的用户角色/权限 - 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 项目开发 _角色管理_用户管理----权限管理