javascript - 基于 REST API 权限呈现 HTML

Question

我有一个带有 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 端点应该没问题，但也许有更好的解决方案。是否已经存在最佳实践解决方案？

Answer 1

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

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