这是在前端硬编码权限的好方法吗？答案

【问题标题】：Is this a good way to hard code permissions in frontend?这是在前端硬编码权限的好方法吗？
【发布时间】：2021-07-31 05:56:39
【问题描述】：

我正在构建一个库存管理应用程序，其中管理员用户还可以更改其他员工的权限。一些权限依赖于其他权限来操作。而且我必须在前端显示一些其他名称以获得特定权限，并且在后端存在一些差异：为了用户易用性。

目前我只是传递函数中的硬编码值来更改权限。

这是一个例子：

<input type="checkbox" class="h-4 w-4 text-blue-600 bg-blue-600" (change)="extractPermissions(permission, ['view stock_company', 'add stock_company', 'edit stock_company', 'delete stock_company'])" #permission>

如果这是在 HTML/JS 中硬编码所有权限的好方法，我正在徘徊，因为我有超过 250 个权限。

【问题讨论】：

标签： javascript html angular user-permissions

【解决方案1】：

我建议使用 json 结构将所有权限存储一次，并在需要时调用它们。

json = '["view stock_company", "add stock_company", "edit stock_company", "delete stock_company"]' ; 

parsedJson  = JSON.parse( json ) 
console.log( parsedJson )

【讨论】：

好的！，这很好，但在那之后，我需要以硬编码的方式实现权限吗？因为我正在从 API 获取权限。但这让我感到困惑，我是否需要分别实现每个权限（以所需的形式）。这是个好方法吗？
我要做的是创建某种用户组来将 250 的数量限制为 5 或 6 个不同的类别。而且我们也不必支持来自输入的用户权限。我们可以为每个用户创建一个哈希。当我们提供哈希时，我们会检查用户是否正确登录。 [ cookie 等] 当我们需要确定用户是否有权访问某些特权时，我们只需检查其用户名或哈希值以及它是否与某些组匹配。作为安全问题，我认为每个人都可以看到前端，因此我们应该通过在后端处理尽可能多的 amap 来最大程度地降低风险。
顺便说一句，只是出于这个原因来隐藏前端的权限，我正在映射权限后端：前端......就像用户有权限''add_with_suppervision stock' ' 在后端，然后我会将其映射为 ''add_with_suppervision stock'': "Add stock" 并添加一个标志，认为它是监督所必需的。
通过您点击我的方式，我已经创建了后端和前端权限的映射，以从前端隐藏它们。然后在从客户端返回更新时借助这些映射处理权限。