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

【问题标题】：User Roles / Permissions on Frontend - React / GraphQL / Apollo Client前端的用户角色/权限 - 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 感谢您的帮助。最终走这条路。

标签： reactjs graphql apollo apollo-client hasura

【解决方案1】：

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

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

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

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

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

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

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

编码愉快！

【讨论】：

感谢您的回复！经过一些试验和错误（并查看 Redux），我得到了一切工作。