Løsning af JWT Refresh Token Handling i Angular med HttpInterceptor

Sikrer sømløs JWT-opdatering i vinkelinterceptorer

I en webapp med sikre brugersessioner er det afgørende at administrere kortvarige JWT-tokens effektivt for en uafbrudt brugeroplevelse. Når tokens udløber, støder brugere ofte på problemer som at blive tvunget til at logge på igen, hvilket kan være frustrerende og forstyrre brugerengagementet. For at tackle dette implementerer udviklere almindeligvis automatisk token-opdatering ved hjælp af en Angular interceptor til at håndtere udløbne sessioner. 🕰️

Denne tilgang involverer opsnapning af HTTP-anmodninger, fangst af 401-fejl (uautoriserede anmodninger) og derefter påkaldelse af en opdateringsproces for at få et nyt token. Der kan dog opstå problemer med at sikre, at den opdaterede token eller cookie anvendes på de genforsøgte anmodninger. Hvis det nye token ikke udbredes korrekt, kan genforsøget mislykkes, hvilket efterlader brugere med den samme godkendelsesfejl og potentielt forstyrre appens arbejdsgange.

I denne guide vil vi gennemgå en praktisk implementering af dette interceptormønster. Vi vil se på, hvordan man fanger fejl, opdaterer tokens og bekræfter, at anmodninger prøver igen med gyldig autorisation. Denne tilgang minimerer afbrydelser og giver dig samtidig kontrol over sessionsfornyelsesprocessen.

Til sidst vil du få indsigt i, hvordan du løser almindelige faldgruber, såsom håndtering af HttpOnly-cookies og håndtering af opdateringssekvenser under høje anmodningsvolumener. Denne metode sikrer, at din applikation kan opretholde en sikker, jævn brugersession uden konstante logins. 🔒

Sikring af pålidelig JWT-godkendelse med vinkelinterceptorer

I eksemplet ovenfor er interceptoren designet til automatisk at opdatere et kortvarigt JWT-token, når der opstår en 401-fejl. Denne form for opsætning er essentiel i applikationer med følsomme data, hvor vedligeholdelse af sessionssikkerhed er kritisk, men brugeroplevelsen bør ikke afbrydes. Interceptoren fanger 401 (uautoriseret) fejl og starter en opdateringstokenanmodning for at forny sessionen uden at kræve, at brugeren skal godkendes igen. Denne proces udløses af catchError-funktionen, som tillader fejlhåndtering inden for en observerbar pipeline. Her signalerer enhver HTTP-fejl, specifikt en 401, at tokenet sandsynligvis er udløbet og starter opfriskningsprocessen.

Funktionen switchMap er et andet kerneelement her; den opretter en ny observerbar strøm til den opdaterede anmodning, og erstatter den gamle observerbare uden at annullere hele flowet. Efter opdatering forsøger den den oprindelige anmodning igen og sikrer, at den nye token anvendes. Ved at skifte fra den gamle observerbare til en ny, kan interceptoren udføre token-fornyelsen på en sømløs, ikke-blokerende måde. Denne teknik er især værdifuld, når du arbejder med realtidsapplikationer, da den reducerer afbrydelser i brugerinteraktioner, mens den stadig opretholder sikker godkendelse. For eksempel vil en bruger, der gennemser et sikret finansielt dashboard, ikke blive omdirigeret eller logget unødigt ud; i stedet hentes det nye token og anvendes i baggrunden. 🔄

Derudover spiller BehaviorSubject en afgørende rolle ved at styre tilstanden af ​​opdateringsprocessen. Dette RxJS-værktøj kan beholde den sidst udsendte værdi, hvilket er særligt nyttigt, når flere anmodninger støder på en 401-fejl på samme tid. I stedet for at udløse flere opdateringer, starter interceptoren kun én token-opdatering, og alle andre anmodninger sættes i kø for at vente på denne enkelte token-fornyelse. Brug af BehaviorSubject med switchMap hjælper med at sikre, at hvis en anmodning udløser opdateringen, vil alle andre anmodninger, der har behov for det nye token, bruge de opdaterede legitimationsoplysninger uden at forårsage gentagne opdateringsopkald. Denne funktion er yderst nyttig i tilfælde, hvor brugere kan have flere åbne faner, eller appen administrerer flere samtidige netværksopkald, hvilket sparer ressourcer og undgår overdreven serverbelastning.

At teste denne interceptorlogik er også afgørende for at sikre, at den fungerer under forskellige scenarier, og derfor inkluderer vi HttpTestingController. Dette Angular testværktøj gør det muligt for os at simulere og teste HTTP-svar, som 401 Uautoriseret status, i et kontrolleret miljø. Ved at bruge flush, en metode leveret af HttpTestingController, kan udviklere simulere virkelige fejlreaktioner og verificere, at interceptoren opfører sig som forventet. Denne testmetode giver os mulighed for at forfine, hvor godt opdateringslogikken håndterer forskellige sager, før appen implementeres. Med disse metoder bevarer interceptoren ikke kun sessionen sikkert, men giver også en mere sømløs, stabil oplevelse for brugere, der navigerer i appen. 👩‍💻

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

Udvidelse af JWT Token Refresh Strategies med Angular Interceptors

Et kritisk aspekt ved at bruge en Angular JWT token interceptor for sikre applikationer håndterer effektivt kompleksiteten ved håndtering af godkendelse og sessionsudløb. Ud over blot at fange 401-fejl og opdatere tokens, er det vigtigt at tænke på håndtering af flere anmodninger, og hvordan man optimerer token-opdateringer. Når flere anmodninger støder på en 401-fejl samtidigt, kan implementering af en kø eller låsemekanisme være yderst nyttig for at sikre, at der kun sker én token-opdatering ad gangen. Denne tilgang forhindrer unødvendige API-kald og reducerer belastningen, især i applikationer med høj trafik, samtidig med at alle forespørgsler i kø kan fortsætte efter opdateringen.

Angulars interceptorer giver os også mulighed for at strømline, hvordan vi håndterer token-lagring og -hentning. I stedet for at indkode tokens i lokal lagring, er det bedst at bruge Angular's HttpKun cookies og CSRF-beskyttelse for at øge sikkerheden. Med HttpOnly-cookies kan JWT ikke tilgås eller manipuleres af JavaScript, hvilket i høj grad forbedrer sikkerheden, men tilføjer en ny udfordring: at sikre, at anmodninger henter den opdaterede cookie automatisk. Angular er indbygget withCredentials option er en løsning, der instruerer browseren om at inkludere disse cookies på hver anmodning.

I et produktionsmiljø er det tilrådeligt at køre ydeevnetest af, hvordan applikationen opfører sig under belastning med token-opdateringer. Testopsætninger kan simulere høje anmodningsvolumener, hvilket sikrer, at interceptorens logik skaleres effektivt. I praksis minimerer denne opsætning risikoen for token-relaterede fejl, der påvirker brugeroplevelsen. Interceptorstrategien, når den er parret med korrekt cookiehåndtering og -test, hjælper med at opretholde en problemfri, brugervenlig og sikker applikation – uanset om appen administrerer kritiske økonomiske data eller en social platforms brugersessioner. 🌐🔐