在 Angular 中，Route Guards 是一种非常常见的机制，它可以让我们在路由导航时进行权限控制、身份验证、数据预加载等操作。本文将详细介绍 Angular 中的 Route Guards 机制及其应用方法，帮助大家更好地理解和运用这一机制。
什么是 Route Guards？
Route Guards 是 Angular 中的一种机制，它可以在路由导航时进行拦截，根据特定的条件来决定是否允许用户访问该路由。Route Guards 主要分为以下几种类型：
CanActivate：用于判断用户是否有权限访问该路由。CanActivateChild：用于判断用户是否有权限访问该路由下的子路由。CanDeactivate：用于在用户离开该路由时进行确认或取消操作。Resolve：用于在路由导航前预加载数据。
CanActivate
CanActivate 是 Route Guards 中最常用的一种类型，它用于判断用户是否有权限访问该路由。CanActivate 的使用方法非常简单，只需要实现一个 canActivate 方法，返回一个布尔值即可。如果返回 true，则表示用户可以访问该路由；如果返回 false，则表示用户无法访问该路由，并且会重定向到指定的路由。
下面是一个简单的示例代码：
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- -------- ------ - ---- ------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- --
------------
----- -----------------------
------ --------------------- ------- -
----- ---------- - -----------------------------------
-- ----------- --- ------- -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-在上面的代码中，我们定义了一个名为 AuthGuard 的 CanActivate 类，它会在用户访问受保护的路由时进行拦截。在 canActivate 方法中，我们判断用户是否已经登录，如果已经登录，则返回 true，表示用户可以访问该路由；如果未登录，则使用 this.router.navigate 方法将用户重定向到登录页面，并返回 false，表示用户无法访问该路由。
CanActivateChild
CanActivateChild 与 CanActivate 类似，但它用于判断用户是否有权限访问该路由下的子路由。CanActivateChild 的使用方法与 CanActivate 类似，只需要实现一个 canActivateChild 方法，返回一个布尔值即可。
下面是一个简单的示例代码：
------ - ---------- - ---- ----------------
------ - ----------------- ----------------------- -------------------- -------- ------ - ---- ------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- -------------- ---------- ---------------- -
------------------- ------- ------- --
-----------------
----- -----------------------
------ --------------------- ------- -
----- ---------- - -----------------------------------
-- ----------- --- ------- -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-在上面的代码中，我们定义了一个名为 AuthChildGuard 的 CanActivateChild 类，它会在用户访问受保护的路由下的子路由时进行拦截。在 canActivateChild 方法中，我们判断用户是否已经登录，如果已经登录，则返回 true，表示用户可以访问该路由下的子路由；如果未登录，则使用 this.router.navigate 方法将用户重定向到登录页面，并返回 false，表示用户无法访问该路由下的子路由。
CanDeactivate
CanDeactivate 用于在用户离开该路由时进行确认或取消操作。CanDeactivate 的使用方法也非常简单，只需要实现一个 canDeactivate 方法，返回一个布尔值或 Observable<boolean> 或 Promise<boolean> 即可。如果返回 true，则表示用户可以离开该路由；如果返回 false，则表示用户无法离开该路由，并且会弹出提示框询问用户是否确认离开该路由。
下面是一个简单的示例代码：
------ - ---------- - ---- ----------------
------ - ------------- - ---- ------------------
------ - ---------- - ---- -------
------ --------- ---------------------- -
-------------- -- -- ------------------- - ---------------- - --------
-
-------------
----------- ------
--
------ ----- ---------------------- ---------- ------------------------------------- -
------------------------ ------------------------ ------------------- - ---------------- - ------- -
------ ----------------------- - ------------------------- - -----
-
-在上面的代码中，我们定义了一个名为 ConfirmDeactivateGuard 的 CanDeactivate 类，它会在用户离开该路由时进行确认或取消操作。在 canDeactivate 方法中，我们判断当前组件是否实现了 CanComponentDeactivate 接口，并且实现了 canDeactivate 方法。如果实现了该方法，则调用该方法，并返回该方法的返回值；如果未实现该方法，则返回 true。
Resolve
Resolve 用于在路由导航前预加载数据。Resolve 的使用方法也非常简单，只需要实现一个 resolve 方法，返回一个 Observable 即可。在路由导航前，Angular 会自动调用该方法，并等待 Observable 返回数据后再继续导航。
下面是一个简单的示例代码：
------ - ---------- - ---- ----------------
------ - -------- ----------------------- ------------------- - ---- ------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ------------ ---------- ------------ -
-------------- ----------------------- ------ --------------------- --------------- -
------ --- ------------------- -- -
------------- -- -
--------------------- ---------
--------------------
-- ------
---
-
-在上面的代码中，我们定义了一个名为 DataResolver 的 Resolve 类，它会在路由导航前预加载数据。在 resolve 方法中，我们返回一个 Observable，该 Observable 会在 1 秒后返回数据。
总结
在本文中，我们详细介绍了 Angular 中的 Route Guards 机制及其应用方法。通过使用 Route Guards，我们可以实现权限控制、身份验证、数据预加载等功能，提升了应用的安全性和用户体验。希望本文能够帮助大家更好地理解和运用这一机制。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e34d4e1886fbafa4fc3f5b