在前端开发中，权限管理是非常重要的一环。而 angular2-permission 是一个非常实用的 npm 包，它能够方便地实现针对用户角色的权限控制。
本文将介绍 angular2-permission 的使用方法，以及一些注意事项。
安装
使用 angular2-permission 需要先安装它。
在命令行中输入：
npm install angular2-permission
安装完成后，即可开始使用它。
配置
接下来需要在 module 文件中配置这个 package。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-- -- -------------------------
------ - ------------------------- - ---- ----------------------
-----------
------------- -
------------
--
-------- -
--------------
-- -- -------------------------
-------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -配置完成后，即可在需要的组件中使用 angular2-permission。
使用
使用 angular2-permission 有以下几个步骤：
- 定义用户角色
- 在需要控制权限的组件中，使用 permission 指令设置访问要求
定义用户角色
定义用户角色需要使用 PermissionService。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------------ ---------------- - ---- ----------------------
-------------
------ ----- ----------- -
------------------- ------------------ ------------------ -
-- ----
----------------------------------------- ---------- -- -- -
------ -----
---
-
------------------ ------- -
------ -------------------------------------------------------
-
-以上代码定义了一个名为 ROLE_ADMIN 的角色，这个角色需要满足用户拥有 admin 角色才能够访问。同时，定义了一个 isAuthenticated 方法，用来检查用户是否满足访问要求。
需要注意的是，角色的定义必须在 AuthService 的构造函数中进行。
使用 permission 指令
在需要控制权限的组件中，使用 permission 指令设置访问要求。
以下是示例代码：
<div *permission="['ROLE_ADMIN']"> 当前用户是管理员 </div>
以上代码中，*permission 属性指定了当前组件需要 ROLE_ADMIN 角色才能够访问。如果用户没有满足访问要求，则组件将被隐藏。
注意事项
使用 angular2-permission 需要注意以下几点：
- 定义用户角色的代码必须在 AuthService 的构造函数中进行，而不能放在别的地方。
- *permission 指令需要传入一个数组，数组中包含当前组件所需要的角色。
- 如果只需要某个角色的一部分权限，可以在 RoleStoreService.defineRole 的第三个参数中定义。
- 使用角色的名称（如 ROLE_ADMIN）应该保持与定义时一致。
总结
angular2-permission 是一个很好用的 npm 包，可以方便地实现权限管理。使用 angular2-permission，我们可以很容易地定义角色和访问要求，从而实现权限控制。在实际开发中，我们可以按照本文中介绍的方法进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d9981e8991b448db569