Rozwiązywanie obsługi tokena odświeżania JWT w Angular za pomocą HttpInterceptor

Zapewnienie płynnego odświeżania JWT w przechwytywaczach kątowych

W aplikacji internetowej z bezpiecznymi sesjami użytkowników skuteczne zarządzanie krótkotrwałymi tokenami JWT ma kluczowe znaczenie dla nieprzerwanego doświadczenia użytkownika. Kiedy tokeny wygasają, użytkownicy często napotykają problemy, takie jak konieczność ponownego logowania, co może być frustrujące i zakłócać zaangażowanie użytkowników. Aby temu zaradzić, programiści często wdrażają automatyczne odświeżanie tokena przy użyciu przechwytywacza Angular do obsługi wygasłych sesji. 🕰️

To podejście polega na przechwytywaniu żądań HTTP, przechwytywaniu błędów 401 (nieautoryzowanych żądań), a następnie wywoływaniu procesu odświeżania w celu uzyskania nowego tokena. Mogą jednak wystąpić problemy z zapewnieniem zastosowania zaktualizowanego tokena lub pliku cookie do ponawianych żądań. Jeśli nowy token nie zostanie poprawnie rozesłany, ponowna próba może się nie powieść, pozostawiając użytkowników z tym samym błędem autoryzacji i potencjalnie zakłócając przepływ pracy w aplikacji.

W tym przewodniku omówimy praktyczną implementację tego wzorca przechwytywacza. Przyjrzymy się, jak wychwytywać błędy, odświeżać tokeny i potwierdzać, że żądania zostaną ponowione z prawidłową autoryzacją. Takie podejście minimalizuje przerwy, dając jednocześnie kontrolę nad procesem odnawiania sesji.

Na koniec zyskasz wgląd w sposoby radzenia sobie z typowymi pułapkami, takimi jak obsługa plików cookie HttpOnly i zarządzanie sekwencjami odświeżania w przypadku dużej liczby żądań. Ta metoda zapewnia, że ​​aplikacja może utrzymać bezpieczną i płynną sesję użytkownika bez ciągłego logowania. 🔒

Zapewnienie niezawodnego uwierzytelniania JWT za pomocą przechwytywaczy Angular

W powyższym przykładzie przechwytywacz zaprojektowano tak, aby automatycznie odświeżał krótkotrwały token JWT za każdym razem, gdy napotkany zostanie błąd 401. Tego rodzaju konfiguracja jest niezbędna w aplikacjach zawierających wrażliwe dane, gdzie utrzymanie bezpieczeństwa sesji ma kluczowe znaczenie, ale nie powinno zakłócać pracy użytkownika. Przechwytywacz wychwytuje błąd 401 (Nieautoryzowany) i inicjuje żądanie odświeżenia tokena w celu odnowienia sesji bez konieczności ponownego uwierzytelniania użytkownika. Proces ten jest wyzwalany przez funkcję catchError, która umożliwia obsługę błędów w obserwowalnym potoku. W tym przypadku każdy błąd HTTP, w szczególności 401, sygnalizuje, że token prawdopodobnie wygasł i inicjuje proces odświeżania.

Funkcja switchMap jest tutaj kolejnym kluczowym elementem; tworzy nowy obserwowalny strumień dla odświeżonego żądania, zastępując stary obserwowalny strumień bez anulowania całego przepływu. Po odświeżeniu ponawia pierwotne żądanie, upewniając się, że zastosowano nowy token. Przełączając się ze starego obserwowalnego na nowy, przechwytywacz może przeprowadzić odnowienie tokena w płynny i nieblokujący sposób. Technika ta jest szczególnie cenna podczas pracy z aplikacjami czasu rzeczywistego, ponieważ ogranicza przerwy w interakcjach użytkownika, przy jednoczesnym zachowaniu bezpiecznego uwierzytelniania. Na przykład użytkownik przeglądający zabezpieczony panel finansowy nie zostanie niepotrzebnie przekierowany ani wylogowany; zamiast tego nowy token jest pozyskiwany i stosowany w tle. 🔄

Ponadto element BehaviorSubject odgrywa kluczową rolę w zarządzaniu stanem procesu odświeżania. To narzędzie RxJS może zachować ostatnią wyemitowaną wartość, co jest szczególnie przydatne, gdy wiele żądań jednocześnie napotyka błąd 401. Zamiast wyzwalać wielokrotne odświeżenia, przechwytywacz inicjuje tylko jedno odświeżenie tokenu, a wszystkie pozostałe żądania są umieszczane w kolejce w celu oczekiwania na to odnowienie pojedynczego tokenu. Używanie BehaviorSubject z switchMap pomaga zapewnić, że jeśli jedno żądanie wyzwoli odświeżenie, wszystkie inne żądania wymagające nowego tokenu będą korzystać ze zaktualizowanych poświadczeń bez powodowania powtarzających się wywołań odświeżania. Ta funkcja jest niezwykle pomocna w przypadkach, gdy użytkownik może mieć wiele otwartych kart lub aplikacja zarządza kilkoma jednoczesnymi połączeniami sieciowymi, oszczędzając w ten sposób zasoby i unikając nadmiernego obciążenia serwera.

Testowanie tej logiki przechwytywacza jest również niezbędne, aby upewnić się, że działa ona w różnych scenariuszach, dlatego też dołączamy HttpTestingController. To narzędzie do testowania Angulara umożliwia nam symulację i testowanie odpowiedzi HTTP, takich jak status 401 Nieautoryzowany, w kontrolowanym środowisku. Używając metody Flush, metody udostępnianej przez HttpTestingController, programiści mogą symulować reakcje na błędy w świecie rzeczywistym i sprawdzać, czy przechwytywacz zachowuje się zgodnie z oczekiwaniami. To podejście do testowania pozwala nam udoskonalić skuteczność logiki odświeżania obsługi różnych przypadków przed wdrożeniem aplikacji. Dzięki tym metodom przechwytywacz nie tylko bezpiecznie zachowuje sesję, ale także zapewnia bardziej płynną i stabilną obsługę użytkownikom poruszającym się po aplikacji. 👩‍💻

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 })))
    );
  }
}

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();
  });
});

Rozszerzanie strategii odświeżania tokenów JWT o przechwytywacze kątowe

Krytyczny aspekt używania Angulara Przechwytywacz tokenów JWT dla bezpiecznych aplikacji skutecznie radzi sobie ze złożonością zarządzania uwierzytelnianiem i wygaśnięciem sesji. Oprócz zwykłego wychwytywania błędów 401 i odświeżania tokenów, ważne jest, aby pomyśleć o obsłudze wielu żądań i optymalizacji odświeżania tokenów. Gdy wiele żądań jednocześnie napotyka błąd 401, wdrożenie kolejki lub mechanizmu blokującego może być niezwykle przydatne, aby zapewnić, że w danym momencie nastąpi tylko jedno odświeżenie tokenu. Takie podejście zapobiega niepotrzebnym wywołaniom API i zmniejsza obciążenie, szczególnie w aplikacjach o dużym natężeniu ruchu, jednocześnie umożliwiając kontynuację wszystkich żądań w kolejce po odświeżeniu.

Przechwytywacze Angulara pozwalają nam również usprawnić sposób obsługi przechowywania i odzyskiwania tokenów. Zamiast kodować tokeny na stałe w pamięci lokalnej, najlepiej używać Angulara HttpTylko pliki cookie oraz ochrona CSRF w celu zwiększenia bezpieczeństwa. W przypadku plików cookie HttpOnly nie można uzyskać dostępu do JWT ani manipulować nim za pomocą JavaScript, co znacznie poprawia bezpieczeństwo, ale dodaje nowe wyzwanie: zapewnienie, że żądania automatycznie pobierają odświeżony plik cookie. Wbudowany Angular withCredentials rozwiązaniem jest opcja, która instruuje przeglądarkę, aby przy każdym żądaniu uwzględniała te pliki cookie.

W środowisku produkcyjnym wskazane jest przeprowadzenie testów wydajnościowych, sprawdzających zachowanie aplikacji pod obciążeniem z odświeżaniem tokenów. Konfiguracje testowe mogą symulować dużą liczbę żądań, zapewniając efektywne skalowanie logiki przechwytywacza. W praktyce taka konfiguracja minimalizuje ryzyko błędów związanych z tokenami wpływających na wygodę użytkownika. Strategia przechwytująca, w połączeniu z odpowiednią obsługą i testowaniem plików cookie, pomaga w utrzymaniu płynnej, przyjaznej dla użytkownika i bezpiecznej aplikacji – niezależnie od tego, czy aplikacja zarządza krytycznymi danymi finansowymi, czy sesjami użytkowników platformy społecznościowej. 🌐🔐