前言
在 web 应用程序中，路由是非常重要的模块。通过路由，我们可以实现页面之间的跳转，构建单页应用程序等。但是，有些页面或某些操作需要特定权限才能够进入或执行，因此需要使用路由守卫来保护路由。
在 Angular 中，路由守卫是一个可以在路由导航前或路由导航后调用的函数或对象，用于控制是否允许用户进行路由导航。
路由守卫的类型
在 Angular 中，路由守卫有以下几种类型：
- CanActivate：该路由守卫用于阻止非授权用户访问需要权限的页面或操作。
- CanActivateChild：该路由守卫用于阻止非授权用户访问子路由。
- CanDeactivate：该路由守卫用于在用户离开一个页面之前执行一些特定操作。
- Resolve：该路由守卫用于在路由激活之前，解析必要的数据。
- CanLoad：该路由守卫用于在 Web 应用加载完成之前，控制某些模块是否加载。
CanActivate
CanActivate 是 Angular 中最常用的路由守卫，它用于保护需要特定权限才能访问的路由。接下来，让我们通过代码来演示如何使用 CanActivate 路由守卫。
1. 创建一个权限服务
我们需要先创建一个服务来模拟用户的权限，并判断用户是否有权限访问特定的路由。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
---------- - ------
------- -
--------------- - -----
-
-------- -
--------------- - ------
-
---------------- ------- -
------ ----------------
-
-2. 创建一个路由守卫
接下来，我们需要创建一个路由守卫来保护需要权限的路由。路由守卫是一个带有 canActivate 方法的 Injectable 类。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------ - ---- ------------------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------------ ------------ ------- ------- ------- --
------------------ ----------------------- ------ --------------------- ------- -
----- ---- ------ - ----------
------ ---------------------
-
--------------- -------- ------- -
-- ---------------------------------- -
------ -----
-
-- ---- --- --- --- ---- ----- -- ------- -- -- --- -------- ---- ------
---------------------------- - ----
---------------------------------
------ ------
-
-3. 添加路由守卫
现在，我们需要在路由定义中添加路由守卫。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- ----------------------------------
------ - --------- - ---- ---------------
----- ---------- ------ - -
- ----- -------- ---------- -------------- --
- ----- ------------ ---------- ------------------- ------------ ----------- --
- ----- --- ----------- ------------- ---------- ------ --
- ----- ----- ---------- --------------------- -
--
-----------
-------- -
---------------------
---------
-
--
-------- -
------------
-
--
------ ----- ---------------- - -通过以上代码，我们已经可以使用 CanActivate 路由守卫来保护需要权限的路由了。
CanActivateChild
CanActivateChild 路由守卫跟 CanActivate 类似，它用于保护子路由。如果一个路由下面有多个子路由，我们可以使用 CanActivateChild 路由守卫来保护这些子路由。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------------- ----------------------- ------------------- - ---- ------------------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- -------------- ---------- ---------------- -
------------------- ------------ ------------ --
----------------------- ----------------------- ------ --------------------- ------- -
------ ---------------------------------
-
-CanDeactivate
CanDeactivate 路由守卫用于在用户离开一个页面之前执行一些特定操作。可以使用它来提示用户心理的确认或禁止用户离开。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------------- ----------------------- ------------------- - ---- ------------------
-------------
----------- ------
--
------ ----- ----------------- ---------- ------------------ -
------------------------ ---- ------ ----------------------- ------ -------------------- -
-- ------------------- -
------ ------------ --- ---- --- ---- -- ---------
-
------ -----
-
-Resolve
Resolve 路由守卫用于在路由激活之前，解析必要的数据。在某些情况下，用户访问某个路由需要加载一些数据，这时候可以使用 Resolve 来解决这个问题。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ---------------------- - ---- ------------------
------ - ---------- - ---- -------
------ - -------------- - ---- --------------------
------ - ------- - ---- ------------
-------------
----------- ------
--
------ ----- --------------- ---------- ---------------- -
------------------- --------------- --------------- --
-------------- ------------------------ ------------------- -
----- -- - --------------------------
------ -----------------------------------
-
-CanLoad
CanLoad 路由守卫用于在 Web 应用加载完成之前，控制某些模块是否加载。如果用户没有特定权限，这些模块将不会被加载。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ----- - ---- ------------------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- ------------- ---------- ------- -
------------------- ------------ ------------ --
-------------- ------- ------- -
------ ---------------------------------
-
-总结
通过以上的介绍，我们已经详细了解了 Angular 中如何使用路由守卫保护路由。路由守卫不仅可以用来保护需要特定权限的路由，还可以用来做很多其他的事情，比如：在用户离开一个页面之前提示确认信息、加载必要的数据等等。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486d0c448841e989455edfe