Resolució del maneig de fitxes d'actualització JWT en angular amb HttpInterceptor

Assegurar una actualització perfecta de JWT en interceptors angulars

En una aplicació web amb sessions d'usuari segures, la gestió eficaç dels tokens JWT de curta durada és crucial per a una experiència d'usuari ininterrompuda. Quan els testimonis caduquen, els usuaris sovint es troben amb problemes com ara ser obligats a tornar a iniciar sessió, que poden ser frustrants i interrompre la participació dels usuaris. Per fer-ho, els desenvolupadors solen implementar l'actualització automàtica de testimonis mitjançant un interceptor angular per gestionar sessions caducades. 🕰️

Aquest enfocament implica interceptar sol·licituds HTTP, detectar errors 401 (sol·licituds no autoritzades) i després invocar un procés d'actualització per obtenir un testimoni nou. Tanmateix, poden sorgir problemes per garantir que el testimoni o la galeta actualitzats s'apliquin a les sol·licituds tornades a provar. Si el testimoni nou no es propaga correctament, el nou intent pot fallar, deixant als usuaris el mateix error d'autorització i possiblement interrompre els fluxos de treball de l'aplicació.

En aquesta guia, passarem per una implementació pràctica d'aquest patró interceptor. Veurem com detectar errors, actualitzar els testimonis i confirmar que les sol·licituds es tornen a intentar amb una autorització vàlida. Aquest enfocament minimitza les interrupcions alhora que us ofereix control sobre el procés de renovació de la sessió.

Al final, obtindreu informació sobre com abordar els inconvenients habituals, com ara la gestió de galetes HttpOnly i la gestió de seqüències d'actualització durant els volums de sol·licituds elevats. Aquest mètode garanteix que la vostra aplicació pugui mantenir una sessió d'usuari segura i fluida sense inicis de sessió constants. 🔒

Garantir una autenticació JWT fiable amb interceptors angulars

A l'exemple anterior, l'interceptor està dissenyat per actualitzar automàticament un token JWT de curta durada sempre que es trobi un error 401. Aquest tipus de configuració és essencial en aplicacions amb dades sensibles, on mantenir la seguretat de la sessió és fonamental, però l'experiència de l'usuari no s'ha d'interrompre. L'interceptor detecta l'error 401 (no autoritzat) i inicia una sol·licitud de testimoni d'actualització per renovar la sessió sense requerir que l'usuari s'autentiqui de nou. Aquest procés s'activa amb la funció catchError, que permet la gestió d'errors dins d'una canalització observable. Aquí, qualsevol error HTTP, concretament un 401, indica que probablement el testimoni ha caducat i inicia el procés d'actualització.

La funció switchMap és un altre element bàsic aquí; crea un nou flux observable per a la sol·licitud actualitzada, substituint l'antic observable sense cancel·lar tot el flux. Després de l'actualització, torna a provar la sol·licitud original, assegurant-se que s'aplica el nou testimoni. En canviar de l'antic observable a un de nou, l'interceptor pot realitzar la renovació del testimoni d'una manera perfecta i sense bloqueig. Aquesta tècnica és especialment valuosa quan es treballa amb aplicacions en temps real, ja que redueix les interrupcions en les interaccions de l'usuari alhora que manté l'autenticació segura. Per exemple, un usuari que navegui per un tauler financer segur no es redirigiria ni es tancaria la sessió innecessàriament; en canvi, el nou testimoni s'adquireix i s'aplica en segon pla. 🔄

A més, el BehaviorSubject té un paper crucial en gestionar l'estat del procés d'actualització. Aquesta utilitat RxJS pot retenir l'últim valor emès, la qual cosa és especialment útil quan diverses sol·licituds troben un error 401 al mateix temps. En lloc d'activar diverses actualitzacions, l'interceptor només inicia una actualització de testimoni i totes les altres sol·licituds es posen a la cua per esperar la renovació d'aquest únic testimoni. L'ús de BehaviorSubject amb switchMap ajuda a garantir que si una sol·licitud activa l'actualització, totes les altres sol·licituds que necessiten el nou testimoni utilitzaran les credencials actualitzades sense provocar trucades d'actualització repetides. Aquesta funció és molt útil en els casos en què els usuaris poden tenir diverses pestanyes obertes o l'aplicació gestiona diverses trucades de xarxa simultànies, estalviant recursos i evitant una càrrega excessiva del servidor.

Provar aquesta lògica d'interceptor també és essencial per garantir que funciona en diferents escenaris, per això incloem el HttpTestingController. Aquesta eina de prova angular ens permet simular i provar respostes HTTP, com l'estat 401 No autoritzat, en un entorn controlat. Mitjançant flush, un mètode proporcionat per HttpTestingController, els desenvolupadors poden simular respostes d'error del món real i verificar que l'interceptor es comporta com s'esperava. Aquest enfocament de prova ens permet refinar fins a quin punt la lògica d'actualització gestiona diversos casos abans de desplegar l'aplicació. Amb aquests mètodes, l'interceptor no només preserva la sessió de manera segura, sinó que també ofereix una experiència més estable i perfecta per als usuaris que naveguen per l'aplicació. 👩‍💻

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

Ampliació de les estratègies d'actualització de fitxes JWT amb interceptors angulars

Un aspecte crític de l'ús d'un Angular Interceptor de fitxes JWT per a aplicacions segures està gestionant de manera eficient les complexitats de la gestió de l'autenticació i la caducitat de la sessió. Més enllà de només detectar errors 401 i actualitzar fitxes, és essencial pensar en la gestió de múltiples sol·licituds i en com optimitzar les actualitzacions de testimonis. Quan diverses sol·licituds troben un error 401 simultàniament, la implementació d'una cua o un mecanisme de bloqueig pot ser extremadament útil per garantir que només es produeixi una actualització de testimoni alhora. Aquest enfocament evita trucades d'API innecessàries i redueix la càrrega, especialment en aplicacions d'alt trànsit, alhora que permet que totes les sol·licituds en cua continuïn després de l'actualització.

Els interceptors d'Angular també ens permeten agilitzar la manera com gestionem l'emmagatzematge i la recuperació de fitxes. En lloc de codificar fitxes a l'emmagatzematge local, el millor és utilitzar Angular Cookies HttpOnly i protecció CSRF per millorar la seguretat. Amb les galetes HttpOnly, JavaScript no pot accedir a JWT ni manipular-lo, la qual cosa millora considerablement la seguretat, però afegeix un nou repte: garantir que les sol·licituds recullin la galeta actualitzada automàticament. Angular està integrat withCredentials L'opció és una solució, indicant al navegador que inclogui aquestes cookies en cada sol·licitud.

En un entorn de producció, és recomanable executar proves de rendiment sobre com es comporta l'aplicació sota càrrega amb actualitzacions de testimoni. Les configuracions de prova poden simular volums elevats de sol·licituds, assegurant que la lògica de l'interceptor s'escala de manera eficient. A la pràctica, aquesta configuració minimitza el risc d'errors relacionats amb el testimoni que afectin l'experiència de l'usuari. L'estratègia d'interceptor, quan es combina amb un maneig i prova de galetes adequats, ajuda a mantenir una aplicació perfecta, fàcil d'utilitzar i segura, tant si l'aplicació gestiona dades financeres crítiques com les sessions d'usuari d'una plataforma social. 🌐🔐