Angular 中的路由守卫

本课将介绍如何使用路由守卫保护 Angular 应用中的路由。

什么是路由守卫？

路由守卫可以控制对 Angular 路由的访问。它们适用于保护敏感或受限的路由。

守卫的类型

• CanActivate：确定路由是否可以激活。
• CanActivateChild：保护子路由。
• CanDeactivate - 在离开路由前进行检查。
• Resolve - 在激活路由前预先获取数据。

创建守卫

使用 Angular CLI 创建守卫：

ng generate guard auth

实现 canActivate()

canActivate() 方法用于控制路由访问：

canActivate(): boolean {
  return true; // or false to block navigation
}

在路由中使用守卫

在路由模块中为路由添加守卫：

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

CanDeactivate 守卫

如果不满足某些条件，CanDeactivate 会阻止离开路由，常用于表单：

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Resolve 守卫

Resolve 守卫会在加载路由前获取数据：

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

总结

您已经学习了如何使用路由守卫保护 Angular 应用并增强导航功能。请继续学习！