简介
在一个 Web 应用中，往往需要对用户的操作进行权限控制，以确保用户只能在其拥有权限的范围内进行操作。在 Angular 中，可以使用官方推荐的 Angular 路由守卫以及自定义指令来实现权限控制。
Angular 路由守卫
Angular 路由守卫可以帮助我们在用户访问某个路由之前，先判断该用户是否拥有访问该路由的权限。它可以拦截用户的路由导航，并在导航完成前执行一些操作，如判断用户是否有访问该路由的权限。
canActivate
canActivate 是一个路由守卫函数，它接收一个 ActivatedRouteSnapshot 和一个 RouterStateSnapshot 参数。前者是要求访问的路由的信息，而后者则是当前的路由状态信息。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------------------- -------------------- -------- ----------- - ---- ------------------
------ - ---------- - ---- -------
-------------
------ ----- --------- ---------- ----------- -
------------
----- -----------------------
------ --------------------- ------------------ - -------- - --------------- - -------- - ------- - ------- -
-- --------
------ ----- -- -- ----- ----------
-
-canActivateChild
canActivateChild 与 canActivate 类似，不同的是它可以用于保护子路由。
canLoad
canLoad 最终由路由进行调用。它通过静态导入模块而不是通过路由加载模块，以提高安全性。如果用户没有访问权限，就不会加载模块。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------ ---------- - ---- ------------------
------ - ---------- - ---- -------
-------------
------ ----- ------------- ---------- ------- -
--------
------ ------
--------- -------------- ------------------- - ---------------- - ------- -
-- --------
------ ----- -- -- ----------------
-
-如何使用
可以在应用的路由配置中直接使用 canActivate、canActivateChild 和 canLoad 作为路由守卫。
-- -------------------- ---- -------
----- ------- ------ - -
- ----- --- ---------- ------------- --
- ----- ------------ ---------- ------------------- ------------ ----------- --
-
----- --------
---------- ---------------
----------------- ------------
--------- -
- ----- --- ---------- ------------------ --
- ----- -------- ---------- -------------- --
- ----- ----------- ---------- ----------------- -
-
--
- ----- ------- ------------- -- -- ----------------------------------- -- -------------- -------- --------------- --
- ----- ----- ---------- ----------------- -
--在这个例子中，AuthGuard 将会拦截 dashboard、admin 路由和 canLoad。
自定义指令
使用自定义指令来控制页面元素的显示与隐藏是 Angular 中的常见做法。利用这个特点，我们可以在拥有特定权限时，显示该元素。
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ ---------------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------------
--
------ ----- ---------------------- ---------- ------ -
-------- -------------- -------
------------
------- ------------ ------------
------- ------------ -----------------
------- ----------------- ----------------
- --
---------- -
-- ---------------------------------------------------- -
-----------------------------------------------------------
- ---- -
------------------------------
-
-
-在这个例子中，我们自定义了一个指令，它接受一个名为“hasPermission”的输入属性，并根据 AuthService 中的 hasPermission() 方法的返回值来控制该指令所在的元素的显示与隐藏。
我们可以在 HTML 文件中使用 *hasPermission="'permissionName'" 的方式将自定义指令使用到某个页面元素上。
<button *hasPermission="'canEdit'">Edit</button>
总结
通过利用 Angular 的路由守卫和自定义指令，我们可以方便地实现权限控制功能。其中，Angular 路由守卫可以帮助我们在用户访问某个路由之前，先判断该用户是否拥有访问该路由的权限。自定义指令则可以控制某个元素在拥有特定权限时的显示与隐藏。
示例代码
本文所有实例代码放在了 GitHub 仓库中，欢迎查看：https://github.com/gilbertchuang/angular-permission-control。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499553e48841e989465423e