Angular 中的路由守卫是一种在导航到某个路由前执行的代码片段。其主要目的是控制路由导航、验证用户权限以及保存当前页面状态等。在本文中，我们将介绍 Angular 路由守卫的概念、类型、使用方法和相关示例。
路由守卫的概念
路由守卫是在导航到某个路由时会被执行的一段代码片段。它们可以用来验证用户是否有权限访问某些资源、处理待处理的异步请求、在路由导航前保存应用程序的当前状态等。简单来说，路由守卫可以使我们更好地掌控我们的应用程序的路由导航。
路由守卫有四个不同的类型，它们共同控制着路由导航：
- CanActivate：用于控制导航到某个路由是否允许，最终返回一个布尔值。
- CanActivateChild：用于控制导航到某子路由是否允许，最终返回一个布尔值。
- CanDeactivate：用于控制离开当前路由是否允许，最终返回一个布尔值。
- Resolve：用于在页面导航前获取必要的数据，以便在页面完成后使用。
路由守卫的使用
要使用路由守卫，我们需要在路由定义中附加一个守卫属性。这个属性可以是单个守卫或一组守卫。当这些守卫返回一个布尔值时，路由导航器将决定是否允许导航到目标路由。
以下代码展示了如何将一个守卫附加到路由定义中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - --------- - ---- ---------------
------ - -------------- - ---- --------------------
----- ------- ------ - -
-
----- --------
---------- ---------------
------------ ----------- -- -------
-
--
-----------
-------- --------------------------------
-------- --------------
--
------ ----- ------------------ - -路由守卫的示例
以下是一个简单的示例，演示了如何在 Angular 应用程序中实现路由守卫。它使用 CanActivate 守卫对非认证用户进行路由保护，并通过一个简单的路由重定向将其重定向到登录页面。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------ - ---- ------------------
-------------
------ ----- --------- ---------- ----------- -
------------------- ------- ------- --
------------------ ----------------------- ------ -------------------- -
-- ------------------------------------- -
-- -------
------ -----
-
-- ------
-------------------------------- - ------------ - ---------- --------- ----
------ ------
-
-在此示例中，我们创建了一个名为 AuthGuard 的服务，并将其实现为 CanActivate 守卫。我们注入了一个 Router 服务，以便在需要进行路由重定向时使用。
在 CanActivate 方法中，我们检查本地存储中是否包含当前用户的详细信息。如果用户已经认证，则我们返回真值，路由导航将继续进行。否则，我们使用 Router 服务将用户重定向到登录页面，并使用 queryParams 属性将当前 URL 传递给登录页面，以便在用户认证后返回原始页面。
结论
Angular 中的路由守卫可以让我们更好地控制应用程序的路由导航，并确保用户只能访问他们有权访问的资源。使用 CanActivate、CanActivateChild、CanDeactivate 和 Resolve 等不同类型的路由守卫，我们可以轻松地实现许多不同的路由控制方案。在你的下一个 Angular 应用程序中尝试使用路由守卫，它们可以提高应用程序的安全性和功能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674eeee0e884a3e30f2b095d