Angular Router 提供多种守卫接口，可以精细控制路由访问权限。

CanActivate

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean | UrlTree {
    if (this.auth.isLoggedIn()) return true;
    return this.router.createUrlTree(['/login']);
  }
}

路由配置：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  }
];

CanDeactivate

防止用户意外离开未保存的表单：

@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<unknown> {
  canDeactivate(component: any): boolean {
    if (component.hasUnsavedChanges?.()) {
      return confirm('有未保存的修改，确定离开？');
    }
    return true;
  }
}

Resolve - 预加载数据

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    return this.userService.getUser(route.params['id']);
  }
}

合理使用路由守卫能让权限逻辑集中管理，避免散落在组件中。