在 Angular 中，路由守卫是一种用于保护和控制导航的机制。它可以在用户导航到某个路由之前或之后执行一些操作，例如验证用户是否有足够的权限访问该路由或者保存用户的导航历史记录等。
在本文中，我们将介绍如何使用路由守卫保护 Angular 应用程序中的子路由。我们将从介绍路由守卫的基础知识开始，然后深入探讨如何在子路由中应用它们。
路由守卫基础知识
路由守卫是 Angular 中一个非常重要的概念，它可以帮助我们保护应用程序的各个部分。下面是 Angular 中常用的几种路由守卫：
CanActivate：当用户导航到某个路由时，该守卫用于验证用户是否有足够的权限访问该路由。CanActivateChild：当用户导航到某个子路由时，该守卫用于验证用户是否有足够的权限访问该子路由。CanDeactivate：当用户从某个路由导航离开时，该守卫用于验证用户是否可以离开该路由。Resolve：在导航到某个路由之前，该守卫用于预先获取该路由所需的数据。
这些守卫都是 Angular 中内置的，我们可以通过在路由配置中注册它们来使用它们。例如，下面是一个简单的路由配置，其中使用了 CanActivate 守卫：
----- ------- ------ - -
-
----- ------------
---------- -------------------
------------ -----------
-
--在上面的示例中，我们将 AuthGuard 守卫注册到了 dashboard 路由中。当用户导航到 dashboard 路由时，Angular 会自动调用 AuthGuard 守卫的 canActivate 方法来验证用户是否有足够的权限访问该路由。
在子路由中应用路由守卫
在 Angular 应用程序中，我们通常会使用子路由来组织和管理页面。子路由是指在一个父路由下面定义的一组子路由，例如：
----- ------- ------ - -
-
----- --------
---------- ---------------
------------ ------------
--------- -
-
----- --------
---------- --------------
--
-
----- --------
---------- --------------
-
-
-
--在上面的示例中，我们定义了一个名为 admin 的父路由，并在该路由下面定义了两个子路由：users 和 roles。我们还将 AuthGuard 守卫注册到了 admin 路由中，以确保只有经过身份验证的用户才能访问该路由。
但是，我们如何确保只有经过身份验证的用户才能访问 users 和 roles 子路由呢？这时，就需要使用 CanActivateChild 守卫了。
CanActivateChild 守卫与 CanActivate 守卫的工作方式基本相同，只不过它是用于保护子路由的。我们可以通过在父路由中注册 CanActivateChild 守卫来保护所有子路由，也可以在每个子路由中单独注册该守卫来保护该子路由。
下面是一个例子，演示如何在 admin 父路由中注册 CanActivateChild 守卫来保护所有子路由：
----- ------- ------ - -
-
----- --------
---------- ---------------
----------------- ------------
--------- -
-
----- --------
---------- --------------
--
-
----- --------
---------- --------------
-
-
-
--在上面的示例中，我们将 AuthGuard 守卫注册到了 admin 路由的 canActivateChild 属性中。当用户导航到 admin 父路由下的任何子路由时，Angular 会自动调用 AuthGuard 守卫的 canActivateChild 方法来验证用户是否有足够的权限访问该子路由。
如果我们只想保护 users 子路由，而不是保护所有子路由，那么可以将 CanActivateChild 守卫注册到该子路由中，如下所示：
----- ------- ------ - -
-
----- --------
---------- ---------------
--------- -
-
----- --------
---------- ---------------
----------------- -----------
--
-
----- --------
---------- --------------
-
-
-
--在上面的示例中，我们将 AuthGuard 守卫注册到了 users 子路由的 canActivateChild 属性中。当用户导航到 users 子路由时，Angular 会自动调用 AuthGuard 守卫的 canActivateChild 方法来验证用户是否有足够的权限访问该子路由。
示例代码
下面是一个完整的示例代码，演示了如何在 Angular 中使用路由守卫保护子路由：
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - -------------- - ---- --------------------------
------ - --------- - ---- ---------------
------ - -------------- - ---- --------------------------
------ - -------------- - ---- --------------------------
------ - -------------- - ---- --------------------------
----- ------- ------ - -
-
----- --------
---------- --------------
--
-
----- --------
---------- ---------------
----------------- ------------
--------- -
-
----- --------
---------- --------------
--
-
----- --------
---------- --------------
-
-
--
-
----- -----
----------- -------
-
--
-----------
-------- -------------------------------
-------- --------------
--
------ ----- ---------------- - -在上面的示例中，我们定义了三个路由：
/login路由，用于显示登录页面。/admin路由，用于显示管理页面。/admin/users路由，用于显示用户管理页面。/admin/roles路由，用于显示角色管理页面。
我们将 AuthGuard 守卫注册到了 admin 父路由的 canActivateChild 属性中，以保护所有子路由。当用户导航到任何子路由时，Angular 会自动调用 AuthGuard 守卫的 canActivateChild 方法来验证用户是否有足够的权限访问该子路由。
总结
在本文中，我们介绍了 Angular 中路由守卫的基础知识，并演示了如何在子路由中应用它们。路由守卫是 Angular 应用程序中非常重要的一部分，它可以帮助我们保护和控制导航，确保应用程序的安全性和可靠性。
如果你想了解更多关于 Angular 路由守卫的知识，建议阅读官方文档或者参考其他相关文章。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657e63d5d2f5e1655d9380a9