// src/app/guards/auth-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';@Injectable({providedIn: 'root'
})
export class AuthGuardService implements CanActivate {constructor(private router: Router, private authService: AuthService) {}canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// 调用 AuthService 的 isLoggedIn 方法（异步）return this.authService.isLoggedIn().pipe(tap((isLoggedIn: boolean) => {if (!isLoggedIn) {// 如果未登录，重定向到登录页面this.router.navigate(['/login']);}}));}
}1. 类的定义和接口实现
export class AuthGuardService implements CanActivate {-
export关键字表示这个类可以在其他文件中被导入和使用。 -
AuthGuardService是类的名称，你可以根据实际需求命名，例如AuthGuard、LoginGuard等。 -
implements CanActivate表示这个类实现了 Angular 的CanActivate接口。CanActivate是一个路由守卫接口，用于决定是否可以激活（访问）某个路由。
2. 构造函数
constructor(private router: Router) {}-
constructor是类的构造函数，用于初始化类的依赖项。 -
private router: Router表示通过依赖注入（Dependency Injection）注入了 Angular 的Router服务。Router服务提供了路由相关的功能，例如导航到其他路由。 -
private修饰符表示router是一个私有成员变量，只能在AuthGuardService类内部使用。
3. canActivate 方法
canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {-
canActivate是CanActivate接口的核心方法，Angular 会在尝试激活路由时调用它。 -
route: ActivatedRouteSnapshot是一个参数，表示当前路由的快照，包含了路由的配置信息、参数等。 -
state: RouterStateSnapshot是另一个参数，表示当前路由状态的快照，包含了路由的 URL 等信息。 -
方法的返回值可以是以下三种类型之一：
-
Observable<boolean>：返回一个 RxJS 的Observable，其值为布尔类型。 -
Promise<boolean>：返回一个 JavaScript 的Promise，其值为布尔类型。 -
boolean：直接返回一个布尔值。
-