根据 REST API 权限呈现 HTML答案

【问题标题】：render HTML based on REST API permissions根据 REST API 权限呈现 HTML
【发布时间】：2020-02-21 20:08:41
【问题描述】：

我有一个带有 REST API 的客户端渲染前端。前端应该根据用户授权渲染一些元素。示例权限可能是

删除用户
也可以删除主管
创建用户
将用户添加到工作流
...

大量权限由管理员管理。我的问题是：

您如何知道您对此呈现的页面拥有哪些权限以及要呈现什么？

我想到的唯一想法是创建一个 API 端点 /user/:id/permissions 并请求用户拥有的每个权限。一个示例响应对象可以是

[
  {
    "permissionId": 0,
    "description": "Has access to page"
  },
  {
    "permissionId": 1,
    "description": "Can create users"
  },
  {
    "permissionId": 2,
    "description": "Can delete users"
  }
  // ...
]

然后我可以根据这些权限开始渲染我的 HTML（伪代码/我通常使用 VueJs）

<button render-if="permissions.contains(1)">This shows up if the user can create users</button>
<button render-if="permissions.contains(2)">This shows up if the user can delete other users</button>

我认为前端代码可能会有点混乱。 API 端点应该没问题，但也许有更好的解决方案。是否已经存在最佳实践解决方案？

【问题讨论】：

您必须检查用户凭据，以便您可以使用用户获取权限，而不是对相关的内容进行额外请求。如果权限处理的 UI 元素很少，可以有条件地处理。如果 UI 差异变得过于复杂，最好将其拆分为用户和管理员视图。为了使权限更干净，您可以添加 enum sid 列。比如delete_user、delete_all、create_user等

标签： javascript html rest api vue.js

【解决方案1】：

您的方法（具有单独的权限端点）是处理此问题的好方法。

另一种选择是使用 HAL 或 Siren 等超媒体格式。每当您访问任何资源时，该资源都会包含一个链接列表，其中包含有关用户下一步可能想要做什么的信息。如果响应中未出现链接，则表示用户无法执行该操作（由于权限问题或其他原因）。

【讨论】：