在渲染 React 组件之前从 API 检查服务器端权限

Question

只是想知道检查用户查看 React 页面的权限的选项，这只能通过 ASP.NET Web API 端点在服务器上实现。

我的项目结构是一个 React 客户端应用程序，它使用 .NET WebApi 项目作为后端。 React项目只是客户端，没有SSR。

作为此应用程序的一部分，任何用户（经过身份验证或未经身份验证）都可以从 API 执行 HTTP GET 请求来检索资源，并在 React 应用程序中显示详细信息。然而，只有资源的“所有者”才被允许编辑该资源。从 PUT 请求的服务器端，我可以通过确保当前经过身份验证的用户 ID 是资源的所有者来轻松检查这一点。

但是，如果不允许用户编辑资源，我想限制从 React 应用程序对编辑表单的访问。这需要某种 API 调用来验证是否应在组件加载时向用户显示编辑表单。我不想将所有这些信息添加到 Claims 对象中，因为用户可能是 1000 个资源的所有者，而这是行不通的。

我现在的想法是：

1. 具有可在组件加载时发送的 HTTP HEAD 请求，以检查用户是否有权编辑资源。我的想法是，URL 可以与编辑/删除 API URL 相匹配，并且如果我需要区分编辑或删除资源，则可能有一个“操作”标头或其他内容。如果获得许可，则返回 200；如果未获得许可，则返回 401/403。但这可能不是 HEAD 请求的正确用法，因为 A）它可以被缓存，B）如果有不同的标头，则不同于“HEAD 和 GET 请求应该具有相同的请求标头，即 GET 不需要动作标题”。此外，它与实际的 GET 请求令人困惑，因为它与 GET 请求完全无关。

或

2. 有一个 /check-permissions 端点，它接受一个请求对象，其中包含有关检查指定资源的权限的详细信息。这似乎解决了 HTTP HEAD 请求问题，并且仍然可以在授予的权限中返回 200/204，如果没有，则返回 401/403，但这意味着单个端点需要对每种资源类型和权限有一个列表/查找要检查的操作（我可以使用 API 端点已使用的 ASPNET 策略要求处理程序进行一些查找，以保护 PUT/DELETE 请求）。

或

3. 欢迎大家提出其他建议:)

谢谢，希望这是有道理的。

干杯， 贾斯汀

Answer 1

既然您无论如何都需要从服务器获取资源，为什么不使用相同的请求来检查当前登录的用户是否可以对该资源执行 C.R.U.D 操作。然后，您可以将允许的操作与资源一起返回。根据您返回的允许操作，您可以渲染组件。