在JavaScript中处理用户权限

开发强大的Web应用程序通常涉及管理用户权限。本文展示了一种干净有效的方法，用于处理前端中用户权限的方法，无论您选择的框架如何（React，Vue或Plain JavaScript）。我们将假设一个宁静的API后端，但是模式适应其他架构。

让我们考虑一个文档管理器应用程序，其中包括Admin（完整访问），编辑器（创建，查看，编辑）和访客（仅查看）等角色。后端应提供用户角色信息。对于此示例，API响应可能包括一个accessLevel属性：

 {
  ID：1，
  标题：“我的第一个文档”，
  作者：742，
  AccessLevel：“ Admin”，
  内容： {...}
}

至关重要的是，前端不应是权限的唯一仲裁者。后端验证对于防止未经授权的访问至关重要。

建立常数

为了清晰和可维护性，为单独文件中的动作和角色定义常数（例如， constants.js ）：

 const Action = {
  modify_file：“ modify_file”，
  view_file：“ view_file”，
  delete_file：“ delete_file”，
  create_file：“ create_file”
};

const角色= {
  管理员：“管理员”，
  编辑：“编辑”，
  客人：“客人”
};

导出{Actions，角色};

使用打字稿枚举将增强类型安全性。这些常数提供：

• 真理的单一来源：轻松查看所有动作和角色。
• 类型安全：防止错别字并提高代码可读性。
• 改进的文档：简化对团队成员的理解。

定义权限映射

创建一个文件（例如， permissions.js ）以将操作映射到角色：

从“ ./constants.js”导入{action，warm};

const mappings = new Map（）;

mappings.set（action.modify_file，[roles.admin，roles.editor]）;
mappings.set（action.view_file，[roles.admin，roles.editor，roles.guest]）;
mappings.set（action.delete_file，[roles.admin]）;
mappings.set（action.create_file，[roles.admin，roles.editor]）;

导出默认映射；

该Map提供：

• 集中管理：轻松修改权限。
• 可测试性：易于使用快照测试进行测试。
• 可读性：清晰的权限概述。

在UI中实施权限检查

假设您有一个React组件渲染下拉菜单：

从“ ./ permissions.js”进口hasper;
从“ ./constants.js”导入{action};

函数下拉（{file}）{
  返回 （
    

{haspermission（file，actions.view_file）&&
• 刷新
} {haspermission（file，actions.modify_file）&&
• 重命名
} {haspermission（file，actions.create_file）&&
• 复制
} {haspermission（file，actions.delete_file）&&
• 删除
}

）； }

这使用hasPermission助手功能（下面说明）来根据用户权限有条件地渲染菜单项。

hasPermission函数

此函数检查用户是否有所需的许可：

从“ ./permissions.js”导入映射；

功能haspermission（文件，操作）{
  如果（！文件？.accesslevel）返回false;
  返回mappings.has（action）&& mappings.get（action）.includes（file.accesslevel）;
}

导出默认haspermission;

这简洁地检查了给定动作的mappings以及是否包括用户的accessLevel 。

扩展图案

这种模式扩展到更复杂的方案。例如，添加许可证检查：

 // ...（许可的常数）...

const licensemappings = new Map（）;
// ...（地图操作给许可）...

功能haslicense（用户，操作）{
  // ...（逻辑检查许可证）...
}

函数hasAccess（文件，用户，操作）{
  返回haspermission（文件，操作）&& haslicense（用户，操作）;
}

或处理不同的文件类型：

 const typemappings = new Map（）;
// ...（地图操作到文件类型和许可）...

功能hastypermession（文件，用户，操作）{
  // ...（逻辑检查文件类型权限）...
}

这允许对权限的粒状控制。测试应该是全面的，包括用于映射的快照测试和许可功能的单元测试。使用React和测试的完整示例可在Codesandbox上使用。请记住，后端验证仍然至关重要。

以上是在JavaScript中处理用户权限的详细内容。更多信息请关注PHP中文网其他相关文章！