如何在Angular Guard中验证Http-Only用户令牌？

当使用Http-Only Cookie存储JWT时，客户端无法直接读取令牌，所以路由守卫的核心逻辑是通过后端接口验证用户身份状态，而非在前端本地解析令牌。以下是具体实现步骤：

1. 后端提供身份验证状态接口 #

首先需要后端新增一个接口（比如/api/auth/validate），作用如下：

• 自动接收浏览器发送的Http-Only Cookie（包含JWT）
• 后端验证JWT的有效性、过期时间等
• 返回用户的登录状态（比如{isAuthenticated: true, user: {...}}或{isAuthenticated: false}）

后端逻辑示例（伪代码）：

// 后端Node.js/Express示例
app.get('/api/auth/validate', (req, res) => {
  const token = req.cookies.jwt; // 从Http-Only Cookie获取令牌
  if (!token) return res.json({ isAuthenticated: false });
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    // 可选：从数据库获取用户信息
    res.json({ isAuthenticated: true, user: decoded.user });
  } catch (err) {
    res.json({ isAuthenticated: false });
  }
});

2. 改造Angular Auth Guard #

在Guard的canActivate方法中调用上述后端接口，根据返回结果判断是否允许访问路由，同时用内存缓存减少重复请求：

步骤2.1：创建AuthService维护登录状态 #

// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
  public isAuthenticated$ = this.isAuthenticatedSubject.asObservable();

  constructor(private http: HttpClient) {}

  // 验证用户身份状态
  validateAuth(): Observable<boolean> {
    return this.http.get<{ isAuthenticated: boolean }>('/api/auth/validate', { withCredentials: true })
      .pipe(
        map(response => {
          this.isAuthenticatedSubject.next(response.isAuthenticated);
          return response.isAuthenticated;
        })
      );
  }

  // 更新本地登录状态（登录成功后调用）
  setAuthenticated(status: boolean): void {
    this.isAuthenticatedSubject.next(status);
  }
}

步骤2.2：实现Auth Guard #

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

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

  canActivate(): Observable<boolean> {
    return this.authService.validateAuth().pipe(
      tap(isAuthenticated => {
        if (!isAuthenticated) {
          this.router.navigate(['/login']);
        }
      })
    );
  }
}

3. 登录/登出的状态同步 #

• 登录成功：后端设置Http-Only Cookie后，前端调用authService.setAuthenticated(true)更新本地缓存状态，避免立即调用验证接口。
• 登出操作：调用后端登出接口（后端清除Http-Only Cookie），前端调用authService.setAuthenticated(false)并跳转到登录页。

关键注意事项 #

• 确保Angular请求携带凭证：所有需要验证身份的请求（包括验证接口）都要设置{ withCredentials: true }，这样浏览器才会自动发送Http-Only Cookie。
• 处理CORS：如果前端和后端跨域，后端需要配置CORS允许携带凭证（比如Express的cors({ credentials: true, origin: '你的前端域名' })）。
• 错误处理：在Guard中捕获请求失败的情况（比如网络错误），默认跳转到登录页。

内容的提问来源于stack exchange，提问作者guirms