在 Angular 应用程序中，路由守卫是一种用于控制导航的技术。路由守卫可以让开发者在导航到某个路由时执行一些操作，比如进行权限检查、确认是否离开当前页面等。Angular 8 提供了三种路由守卫：CanActivate，CanDeactivate 和 Resolve。本文将详细介绍这三种守卫的用法和示例。
CanActivate
CanActivate 守卫用于控制用户是否能够访问某个路由。当用户尝试导航到一个需要权限的路由时，CanActivate 守卫会检查用户是否具有所需的权限。如果用户没有权限，则导航会被阻止，而不是让用户看到一个无法访问的页面。
CanActivate 守卫是一个接口，它有一个 canActivate 方法。该方法返回一个 Observable 或 Promise，如果返回值为 true，则导航继续进行；如果返回值为 false，则导航被取消。
下面是一个使用 CanActivate 守卫的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------- - ---- ------------------
------ - ---------- - ---- -------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------------ ------------ --
------------------ ----------------------- ------ --------------------- ------------------ - -------- - --------------- - -------- - ------- - ------- -
------ ------------------------------ -- ---------
-
-在上面的示例中，AuthGuard 类实现了 CanActivate 接口，并注入了一个 AuthService 服务。canActivate 方法中，我们调用了 AuthService 服务的 isLoggedIn 方法，该方法返回一个 Observable，表示用户是否已登录。如果用户已登录，则返回 true，否则返回 false。如果返回 false，则导航被取消。
CanDeactivate
CanDeactivate 守卫用于控制用户在离开某个路由时是否需要进行确认。当用户尝试离开一个页面时，CanDeactivate 守卫会询问用户是否确定要离开。如果用户取消离开，则导航被取消，用户留在当前页面。
CanDeactivate 守卫是一个接口，它有一个 canDeactivate 方法。该方法接收一个组件实例和当前路由状态作为参数，并返回一个 Observable 或 Promise，表示用户是否可以离开当前页面。
下面是一个使用 CanDeactivate 守卫的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------------- ----------------------- -------------------- ------- - ---- ------------------
------ - ---------- - ---- -------
------ - ---------------- - ---- ------------------------------
-------------
----------- ------
--
------ ----- ------------ ---------- ------------------------------- -
------------------------ ----------------- ------------- ----------------------- ------------- -------------------- ----------- --------------------- ------------------ - -------- - --------------- - -------- - ------- - ------- -
------ -------------------------- -- ----- ------------- --
-
-在上面的示例中，ConfirmGuard 类实现了 CanDeactivate 接口，并指定了泛型类型为 ConfirmComponent，即该守卫只适用于 ConfirmComponent 组件。canDeactivate 方法中，我们调用了 ConfirmComponent 组件的 canDeactivate 方法，该方法返回一个 Observable，表示用户是否可以离开当前页面。如果返回 true，则用户可以离开当前页面；如果返回 false，则用户需要确认是否离开当前页面。
Resolve
Resolve 守卫用于在导航到某个路由前，预先获取路由数据。当用户导航到一个需要动态数据的路由时，Resolve 守卫会从服务器获取数据，并将数据传递给路由组件。这样，路由组件就可以直接使用预先获取的数据，而不需要再进行一次数据请求。
Resolve 守卫是一个接口，它有一个 resolve 方法。该方法返回一个 Observable 或 Promise，表示要预先获取的数据。当数据获取完成后，路由组件会自动接收到数据，并进行相应的处理。
下面是一个使用 Resolve 守卫的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ----------------------- ------------------- - ---- ------------------
------ - ---------- - ---- -------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- ------------ ---------- ------------ -
------------------- ------------ ------------ --
-------------- ----------------------- ------ --------------------- --------------- - ------------ - --- -
------ --------------------------- -- --------
-
-在上面的示例中，DataResolver 类实现了 Resolve 接口，并注入了一个 DataService 服务。resolve 方法中，我们调用了 DataService 服务的 getData 方法，该方法返回一个 Observable，表示从服务器获取的数据。当数据获取完成后，路由组件会自动接收到数据，并进行相应的处理。
结论
路由守卫是 Angular 应用程序中非常重要的技术，它可以让开发者更好地控制导航。CanActivate 守卫用于控制用户是否能够访问某个路由，CanDeactivate 守卫用于控制用户在离开某个路由时是否需要进行确认，Resolve 守卫用于在导航到某个路由前，预先获取路由数据。使用路由守卫可以让我们更好地控制用户体验，提高应用程序的安全性和性能。
以上是对 Angular 8 的路由守卫（CanActivate，CanDeactivate，Resolve）的详细解释和示例代码。希望本文能够对你有所帮助，让你更好地掌握 Angular 的路由守卫技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6777842bc1c5215e3cb85820