在 Angular 10 中，路由守卫是一项非常有用的功能，它可以帮助我们保持应用程序的稳定性和安全性。路由守卫是一个可用于拦截或过滤路由导航的逻辑。通过使用路由守卫，我们可以在用户浏览到不同页面之前执行一些操作，例如验证用户是否已登录、是否有足够的权限访问该页面等。
路由守卫的类型
Angular 提供了四个路由守卫，您可以根据应用程序中定义的需求使用它们。
CanActivate
当我们使用 CanActivate 守卫时，它将帮助我们决定用户是否有权访问某个路由。例如，如果您想在用户访问受保护的页面之前检查他们是否有权访问该页面，则可以使用 CanActivate 守卫。可以在一个组件中使用多个 CanActivate 守卫，这些守卫可以组合为一个数组。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- ------------------- - ---- ------------------
------ - ----------- - ---- -----------------
-------------
------ ----- --------- ---------- ----------- -
------------------- ------------ ------------ --
------------------ ----------------------- ------ -------------------- -
-- ------------------------------- -
------ -----
- ---- -
---------------------------- - ----------
---------------------------------
------ ------
-
-
-CanActivateChild
当您希望为某个嵌套的子路由启用守卫时，使用 CanActivateChild 守卫。这对于在 Angular 应用程序中应用逻辑层次结构的情况非常有用。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------------- ----------------------- ------------------- - ---- ------------------
------ - ----------- - ---- -----------------
-------------
------ ----- --------- ---------- ---------------- -
------------------- ------------ ------------ --
----------------------- ----------------------- ------ -------------------- -
-- ------------------------------- -
------ -----
- ---- -
---------------------------- - ----------
---------------------------------
------ ------
-
-
-CanDeactivate
使用 CanDeactivate 守卫，我们可以控制路由离开前的操作。例如，如果用户在填写表单期间意外关闭或浏览到另一个页面，则可以使用 CanDeactivate 守卫提示用户是否要放弃输入的内容。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------- - ---- ------------------
------ - ---------------------- - ---- -------------------------
-------------
------ ----- --------------- ---------- ------------------------------------- -
------------------------ ----------------------- -
-- --------------------------- -
------ -----
- ---- -
------ ------
-
-
-Resolve
当我们需要在路由变化之前执行任何异步任务时，可以使用 Resolve 守卫。例如，如果我们需要确保数据已加载到组件中，我们可以使用 Resolve 守卫来加载数据。当数据加载时，Resolve 守卫将锁定路由，直到数据完全加载。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ---------------------- - ---- ------------------
------ - ---------- - ---- ----------------
-------------
------ ----- ------------ ---------- ------------ -
------------------- ----------- ----------- --
-------------- ----------------------- -
------ ----------------------------------------
---------------- ---- -- -------
-
-路由守卫和路由器
了解 Router 类的各种事件和方法非常重要，当路由器发生变化时，这些事件和方法会触发路由守卫。
CanLoad
在 Angular 中，有时候我们需要在应用的路由模块加载之前验证某些条件，这时候我们可以使用 CanLoad 守卫。CanLoad 守卫将帮助我们决定是否从服务器获取 JavaScript 模块以加载指定路由。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- ------------------
------ - ----------- - ---- -----------------
-------------
------ ----- ------------ ---------- ------- -
------------------- ------------ ------------ --
--------- -
-- ------------------------------- -
------ -----
- ---- -
---------------------------- - ----
---------------------------------
------ ------
-
-
-要启用 CanLoad 守卫，请使用 canLoad 属性进行配置。
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
canLoad: [CanLoadGuard]
}
];总结
路由守卫是 Angular 中非常有用的特性之一，它能够帮助我们控制路由导航和拦截路由请求。在本文中，我们已经介绍了 Angular 10 中的四种路由守卫，分别是 CanActivate、CanActivateChild、CanDeactivate 和 Resolve。此外，我们还介绍了 Angular 路由器，学习了 CanLoad 守卫的使用。希望本文能够帮助您更好地使用 Angular 10 中的路由守卫。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65227d4495b1f8cacd9fa931