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 トークン更新オブザーバブルから再試行された HTTP リクエストへの切り替えを許可し、最新のオブザーバブルのみが完了するようにします。
7. Angular でインターセプターをテストするにはどうすればよいですか?
8. アンギュラーの HttpTestingController は、401 エラーを含む HTTP 応答をシミュレートして、インターセプター ロジックが正しく動作することを確認するのに役立ちます。
9. なぜ使うのか withCredentials クローン化されたリクエスト内で?
10. の withCredentials このフラグは、セキュアな HttpOnly Cookie が各リクエストに確実に含まれるようにします。これは、セキュアなセッションを維持するために重要です。
11. トラフィックが多い場合にトークンの更新処理を最適化するにはどうすればよいですか?
12. 単一の使用 BehaviorSubject ロック メカニズムは、複数の更新リクエストを防止し、高トラフィックのシナリオでのパフォーマンスを向上させるのに役立ちます。
13. インターセプターはセッションの有効期限が切れた際のユーザー エクスペリエンスにどのような影響を与えますか?
14. インターセプターによりセッションの自動更新が可能になるため、ユーザーが予期せずログアウトすることがなくなり、よりスムーズなユーザー エクスペリエンスが実現します。
15. どのようにして clone リクエストの変更に役立ちますか?
16. clone 設定などの変更されたプロパティを含むリクエストのコピーを作成します。 withCredentials元のリクエストを変更せずに。
17. インターセプターは複数のユーザー セッションで動作しますか?
18. はい、ただし、各セッションがその JWT を個別に管理する必要があるか、リフレッシュ ロジックを複数のセッションに適合させる必要があります。
19. インターセプターは 401 以外のエラーを処理できますか?
20. はい、インターセプターを拡張して、403 Forbidden などの他のエラーをキャッチし、適切に処理して UX を向上させることができます。

Angular アプリケーションでの JWT トークン更新の合理化

効果的な JWT トークン管理は、Angular アプリケーションのユーザー エクスペリエンスとセキュリティの両方を強化するために重要です。 401 エラーをキャッチし、トークンの更新を自動的に開始するインターセプターを実装することで、強制的なログアウトを回避し、シームレスなユーザー フローを提供できます。さらに、リフレッシュ中に同時リクエストを処理するために、 行動主題により、リフレッシュ呼び出しが 1 回だけ行われるようになり、リソースの使用が最適化されます。

最終的な目標は、セキュリティとユーザーの利便性のバランスを取ることです。現実世界のシナリオに合わせてインターセプター ロジックを定期的にテストして改良することで、アプリが大量のリクエストを問題なく処理できるようになります。トークン管理のベスト プラクティスを採用すると、セッション全体で安全でユーザー フレンドリーなエクスペリエンスを維持できます。 👨‍💻