前言
前端开发中，我们经常需要对某些事件进行权限控制。简单的权限控制可以通过 if-else 等语句来实现，但是当需要对多个事件进行权限控制时，会让代码变得耦合、难以维护。因此，我们需要一个更加简单、高效的解决方案。
简介
Simple-ngx-policy 是一款基于 Angular 的轻量级权限控制库，它提供了多种权限控制方式，支持动态路由、授权页面和自定义权限等功能。同时，它还可以与后端 API 集成，来实现更加全面的权限控制。
安装
您可以通过 npm 进行 simple-ngx-policy 的安装：
npm install simple-ngx-policy --save
使用
以下是一个简单的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------------- - ---- --------------------
------------
--------- -----------
--------- -
------- ---------------------------------
------- ------------------------------------
------- ----------------------------------
--
--
------ ----- ------------ -
------------------- ------- ----------------------- --
---------- -
----------------------------- ---------------
-------------------------------
-
-在这个示例中，我们使用 *policy 指令来进行权限控制，它的值为要检查的权限名称。如果用户有该权限，则按钮会被渲染出来，否则按钮将不会被渲染。
在 ngOnInit() 方法中，我们使用了 allow() 和 deny() 方法来设置权限。allow() 方法用于设置可以访问的权限，deny() 方法用于设置禁止访问的权限。
简单易懂，非常容易上手！
动态路由
Simple-ngx-policy 可以与 Angular 的路由系统集成，来实现对动态路由的权限控制。假设我们有一个 /user/:userId 路由，我们可以这样来配置：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - -------------------- - ---- --------------------
------ - ------------- - ---- -------------------
----- ------- ------ - -
-
----- ---------------
---------- --------------
------------ -----------------------
----- - ------- ---------- --
--
--
-----------
-------- --------------------------------
-------- ---------------
--
------ ----- ----------------- --在这里，我们使用了 canActivate 属性来指定一个守卫，即 SimpleNgxPolicyGuard。我们还可以通过 data 属性来传递一些元数据，如该路由所需要的 policy 名称，以便于这些信息的检查。
控制页面的显示
我们可以使用 *policy 指令来控制页面的显示，但是这样有时候会显得有些麻烦。Simple-ngx-policy 还提供了更加直观的方法来控制页面的显示，如下所示：
<ng-container *polCheck="'addUser'"> <button (click)="addUser()">添加用户</button> </ng-container>
在这里，我们使用 *polCheck 指令来检查权限，如果用户有该权限，则包含在其内的内容会被渲染出来，否则渲染出来的内容将会是空的。
自定义权限
除了使用已有的权限外，我们还可以创建自定义权限，以便于更加精细地控制页面元素的显示。例如，我们可以创建一个 editCurrentUser 权限，只允许当前登录用户编辑自己的信息：
-- -------------------- ---- -------
------ - ---------------------- - ---- --------------------
------------
--------- -----------
--------- -
------- -------------------------------------------
--
--
------ ----- ------------ -
------------------- ------- ----------------------- --
---------- -
------------------------------------- -- -- -
------ ------------------- --- -----------------------------
---
-
-在这里，我们使用 define() 方法来定义一个新的权限。这个方法的第一个参数是权限名称，第二个参数是一个回调函数，它用于检查当前用户是否具有该权限。
结语
Simple-ngx-policy 是一款非常优秀的权限控制库，它可以轻松地实现多种权限控制方式，为繁琐的权限控制工作带来了极大的便利性。希望这篇文章能够帮助您快速入门。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600589c081e8991b448ed35a