什么是路由守卫（route guards）？

Question

Accepted Answer

**路由守卫（route guards）**是用于控制**是否允许导航进入/离开某个路由**的函数。它们在路由激活之前（或在你离开某个路由之前）运行，可用于实现身份认证检查、权限控制以及"未保存更改"提示。 ## 守卫的类型 ```text CanActivate → 用户能否进入该路由？（认证/权限检查） CanActivateChild → 同上，针对子路由 CanDeactivate → 用户能否离开？（"你有未保存的更改"） CanMatch → 该路由是否应该被匹配？（功能开关、基于角色） resolve → 在路由激活之前预先获取数据 ``` ## 一个函数式 CanActivate 守卫（现代 Angular） ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` 守卫会返回 `true`（允许）、`false`（阻止）或一个 `UrlTree`（重定向）。现代 Angular 使用**函数式守卫**（配合 `inject()` 的普通函数），而不是较旧的基于类的守卫。 ## 将守卫应用到路由上 ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate —— 防止意外丢失数据 ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` 这个经典的守卫会在用户离开一个有未保存编辑内容的表单之前向其发出警告。 ## 守卫可以是异步的 ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## 为什么这很重要守卫是在 Angular 中强制执行访问控制和导航规则的标准、集中化方式——保护需要认证的路由、按角色/权限进行限制、防止在退出时丢失数据，以及预先加载数据（resolvers）。将这些检查放在守卫中（而不是分散在各个组件里）能让安全和导航逻辑保持一致且声明式；在受保护路由上使用 `authGuard` 几乎是每个真实 Angular 应用都会实现的功能。