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 인터셉터에서 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. Angular의 HttpTestingController 401 오류를 포함한 HTTP 응답을 시뮬레이션하여 인터셉터 논리가 올바르게 작동하는지 확인하는 데 유용합니다.
9. 왜 사용합니까? withCredentials 복제된 요청에서?
10. 그만큼 withCredentials 플래그는 보안 세션을 유지하는 데 중요한 보안 HttpOnly 쿠키가 각 요청에 포함되도록 보장합니다.
11. 트래픽이 많은 상황에서 토큰 새로 고침 처리를 최적화하려면 어떻게 해야 합니까?
12. 단일 사용 BehaviorSubject 또는 잠금 메커니즘을 사용하면 여러 새로 고침 요청을 방지하여 트래픽이 많은 시나리오에서 성능을 향상시킬 수 있습니다.
13. 인터셉터는 세션 만료 시 사용자 경험에 어떤 영향을 미치나요?
14. 인터셉터는 자동 세션 갱신을 활성화하므로 사용자가 예기치 않게 로그아웃되는 일이 없어 보다 원활한 사용자 경험을 제공합니다.
15. 어떻게 clone 요청 수정에 도움이 되셨나요?
16. clone 설정과 같은 수정된 속성을 사용하여 요청 복사본을 생성합니다. withCredentials, 원래 요청을 변경하지 않고.
17. 인터셉터가 여러 사용자 세션에서 작동합니까?
18. 예, 하지만 각 세션은 JWT를 독립적으로 관리해야 합니다. 그렇지 않으면 새로 고침 논리가 여러 세션에 맞게 조정되어야 합니다.
19. 인터셉터가 401이 아닌 오류를 처리할 수 있나요?
20. 예, 인터셉터를 확장하여 403 Forbidden과 같은 다른 오류를 포착하고 더 나은 UX를 위해 적절하게 처리할 수 있습니다.

Angular 애플리케이션에서 JWT 토큰 새로 고침 간소화

효과적인 JWT 토큰 관리는 Angular 애플리케이션의 사용자 경험과 보안을 모두 향상시키는 데 중요합니다. 401 오류를 포착하고 자동으로 토큰 새로 고침을 시작하는 인터셉터를 구현하면 강제 로그아웃을 방지하고 원활한 사용자 흐름을 제공할 수 있습니다. 또한 다음을 사용하여 새로 고치는 동안 동시 요청을 처리합니다. 행동 주제, 새로 고침 호출이 하나만 이루어지도록 보장하여 리소스 사용을 최적화합니다.

궁극적으로 목표는 보안과 사용자 편의성 사이의 균형을 맞추는 것입니다. 실제 시나리오에 맞게 인터셉터 논리를 정기적으로 테스트하고 개선하면 앱이 문제 없이 대량의 요청을 처리할 수 있습니다. 토큰 관리에 모범 사례를 채택하면 세션 전체에서 안전하고 사용자 친화적인 환경을 유지하는 데 도움이 될 수 있습니다. 👨‍💻