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

问题描述

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

用户可以创建一个团队，将信息存储在“团队”表中，也可以以经理或教练的身份在“ team_staff”表中创建记录。这很简单。我现在想做的是当用户访问时，例如：www.mysite.com/team/update/1，以检查该用户是否存在于“ team_staff”表中，如果不存在，则向他们显示错误消息甚至重定向。在查看团队成员时，还要根据他们是否是工作人员来隐藏某些按钮。

我应该在登录时处理此问题，并对用户所属的所有团队进行查询，并将其存储在会话/ cookie中，或者在每次调用该组件时对其进行查询/检查吗？还是我要离开，应该另辟？径？

希望这个问题是有道理的。谢谢！

解决方法

这个问题很有意义，我相信许多开发人员也会遇到类似的问题。

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

对于这个问题，我们有很多解决方案，而这是最好的，取决于您的基础架构，您的团队等等。基本上，您需要调用API来检查权限，因为您的权限存储在后端。切勿在会话，cookie等前端存储上存储权限。

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

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

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

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

祝您编程愉快！