举例: 假设我们有两个需要路由守卫保护的页面 —— admin 和 user,需要确保登录和授权了才能访问。
const routes: Routes = [ { path: 'admin', component: AdminComponent, canActivate: [AuthGuard, AdminGuard] }, { path: 'user', component: UserComponent, canActivate: [AuthGuard, UserGuard] }, ];
它们需要使用 canActivate 守卫来进行保护,同时根据不同的用户类型使用不同的守卫。而我们又有一个顶层路由,用于处理登陆:
const routes: Routes = [ { path: '', component: LoginComponent }, { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }, { path: 'user', component: UserComponent, canActivate: [AuthGuard] }, ];
在这里,AuthGuard 包含登录验证逻辑,并确保正确地根据用户类型引导到其他守卫(AdminGuard 或 UserGuard)。这么做,Angular 会自动按照正确的顺序运行多个守卫和彼此之间的依赖关系,以确保应用程序的安全性和授权性。