使用 HttpInterceptor 解决 Angular 中的 JWT 刷新令牌处理问题

使用 Angular 实现 JWT 拦截器：错误处理和刷新令牌解决方案

使用 Angular 和模块化服务结构进行错误处理和会话管理

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { catchError, switchMap } from 'rxjs/operators';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  private refreshTokenInProgress$ = new BehaviorSubject<boolean>(false);
  constructor(private authService: AuthService, private router: Router) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({ withCredentials: true });
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          return this.handle401Error(req, next);
        }
        return throwError(() => error);
      })
    );
  }
  private handle401Error(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.refreshTokenInProgress$.getValue()) {
      this.refreshTokenInProgress$.next(true);
      return this.authService.refreshToken().pipe(
        switchMap(() => {
          this.refreshTokenInProgress$.next(false);
          return next.handle(req.clone({ withCredentials: true }));
        }),
        catchError((error) => {
          this.refreshTokenInProgress$.next(false);
          this.authService.logout();
          this.router.navigate(['/login'], { queryParams: { returnUrl: req.url } });
          return throwError(() => error);
        })
      );
    }
    return this.refreshTokenInProgress$.pipe(
      switchMap(() => next.handle(req.clone({ withCredentials: true })))
    );
  }
}

JWT 拦截器令牌刷新处理的 Angular 单元测试

在 Angular 拦截器中测试 JWT 刷新和 HTTP 错误处理

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { JwtInterceptor } from './jwt.interceptor';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { AuthService } from './auth.service';
describe('JwtInterceptor', () => {
  let httpMock: HttpTestingController;
  let authServiceSpy: jasmine.SpyObj<AuthService>;
  let httpClient: HttpClient;
  beforeEach(() => {
    authServiceSpy = jasmine.createSpyObj('AuthService', ['refreshToken', 'logout']);
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        JwtInterceptor,
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: AuthService, useValue: authServiceSpy }
      ]
    });
    httpMock = TestBed.inject(HttpTestingController);
    httpClient = TestBed.inject(HttpClient);
  });
  afterEach(() => {
    httpMock.verify();
  });
  it('should refresh token on 401 error and retry request', () => {
    authServiceSpy.refreshToken.and.returnValue(of(true));
    httpClient.get('/test').subscribe();
    const req = httpMock.expectOne('/test');
    req.flush(null, { status: 401, statusText: 'Unauthorized' });
    expect(authServiceSpy.refreshToken).toHaveBeenCalled();
  });
});

有关使用 Angular 拦截器处理 JWT 令牌的常见问题

1. 怎么样 catchError 帮助 JWT 令牌处理？
2. 使用 catchError 拦截器允许我们识别 401 错误并在令牌过期时无缝触发令牌刷新请求。
3. 为什么是 BehaviorSubject 使用而不是 Subject 用于跟踪刷新状态？
4. BehaviorSubject 保留最后发出的值，使其可用于管理并发请求之间的刷新状态，而无需触发多个刷新调用。
5. 有什么作用 switchMap 重试 HTTP 请求有何作用？
6. switchMap 允许从令牌刷新 observable 切换到重试的 HTTP 请求，确保只有最新的 observable 完成。
7. 如何在 Angular 中测试拦截器？
8. 角的 HttpTestingController 对于模拟 HTTP 响应（包括 401 错误）非常有用，以验证拦截器逻辑是否正常工作。
9. 为什么使用 withCredentials 在克隆的请求中？
10. 这 withCredentials 标志确保每个请求中都包含安全的 HttpOnly cookie，这对于维护安全会话非常重要。
11. 如何在大流量下优化令牌刷新处理？
12. 使用单个 BehaviorSubject 或锁定机制可以帮助防止多个刷新请求，从而在高流量场景中提高性能。
13. 拦截器如何影响会话过期时的用户体验？
14. 拦截器支持自动会话更新，因此用户不会意外注销，从而提供更流畅的用户体验。
15. 怎么样 clone 帮助修改请求？
16. clone 创建具有修改属性的请求副本，例如设置 withCredentials，不改变原来的请求。
17. 拦截器是否适用于多个用户会话？
18. 是的，但每个会话需要独立管理其 JWT，或者刷新逻辑应适应多个会话。
19. 拦截器可以处理非401错误吗？
20. 是的，拦截器可以扩展以捕获其他错误，例如 403 Forbidden，并适当处理它们以获得更好的用户体验。

简化 Angular 应用程序中的 JWT 令牌刷新

有效的 JWT 令牌管理对于增强 Angular 应用程序的用户体验和安全性至关重要。通过实施拦截器来捕获 401 错误并自动启动令牌刷新，您可以避免强制注销并提供无缝的用户流程。此外，在刷新期间处理并发请求 行为主体，确保仅进行一次刷新调用，从而优化资源使用。

最终的目标是在安全性和用户便利性之间取得平衡。定期测试和完善现实场景的拦截器逻辑，使您的应用程序能够毫无问题地处理大量请求。采用令牌管理的最佳实践有助于在会话中保持安全、用户友好的体验。 👨‍💻