Reševanje ravnanja z žetonom za osvežitev JWT v Angular s HttpInterceptor

Zagotavljanje brezšivne osvežitve JWT v prestreznikih Angular

V spletni aplikaciji z varnimi uporabniškimi sejami je učinkovito upravljanje kratkotrajnih žetonov JWT ključnega pomena za neprekinjeno uporabniško izkušnjo. Ko žetoni potečejo, se uporabniki pogosto srečujejo s težavami, kot je prisilna ponovna prijava, kar je lahko frustrirajoče in moti sodelovanje uporabnikov. Da bi rešili to težavo, razvijalci običajno izvajajo samodejno osveževanje žetonov z uporabo prestreznika Angular za obravnavanje potečenih sej. 🕰️

Ta pristop vključuje prestrezanje zahtev HTTP, lovljenje napak 401 (nepooblaščenih zahtev) in nato priklic postopka osveževanja za pridobitev novega žetona. Vendar lahko pride do težav pri zagotavljanju, da se posodobljeni žeton ali piškotek uporabi za vnovične zahteve. Če se novi žeton ne širi pravilno, ponovni poskus morda ne bo uspel, zaradi česar bodo uporabniki imeli isto avtorizacijsko napako in morebitne motnje v poteku dela aplikacije.

V tem priročniku se bomo sprehodili skozi praktično izvedbo tega vzorca prestreznika. Ogledali si bomo, kako odkriti napake, osvežiti žetone in potrditi, da zahteve znova poskusijo z veljavno avtorizacijo. Ta pristop zmanjša prekinitve, hkrati pa vam omogoča nadzor nad postopkom obnavljanja seje.

Na koncu boste pridobili vpogled v to, kako odpraviti pogoste pasti, kot je obravnavanje HttpOnly piškotkov in upravljanje zaporedij osveževanja med velikimi količinami zahtev. Ta metoda zagotavlja, da lahko vaša aplikacija vzdržuje varno in nemoteno uporabniško sejo brez stalnih prijav. 🔒

Zagotavljanje zanesljive avtentikacije JWT s prestrezniki Angular

V zgornjem primeru je prestreznik zasnovan tako, da samodejno osveži kratkotrajni žeton JWT vsakič, ko naleti na napako 401. Ta vrsta nastavitve je bistvena v aplikacijah z občutljivimi podatki, kjer je vzdrževanje varnosti seje ključnega pomena, vendar uporabniška izkušnja ne sme biti prekinjena. Prestreznik zazna napako 401 (nepooblaščeno) in sproži zahtevo za žeton za osvežitev za obnovitev seje, ne da bi od uporabnika zahteval ponovno avtentikacijo. Ta proces sproži funkcija catchError, ki omogoča obravnavo napak znotraj opazovanega cevovoda. Tu vsaka napaka HTTP, natančneje 401, signalizira, da je žeton verjetno potekel, in sproži postopek osveževanja.

Funkcija switchMap je še en ključni element tukaj; ustvari nov observable tok za osveženo zahtevo, ki nadomešča staro observable, ne da bi preklical celoten tok. Po osvežitvi znova poskusi izvirno zahtevo in zagotovi, da je nov žeton uporabljen. S preklopom s starega opazovalca na novega lahko prestreznik izvede obnovo žetona na brezhiben način brez blokiranja. Ta tehnika je še posebej dragocena pri delu z aplikacijami v realnem času, saj zmanjša prekinitve uporabniških interakcij, hkrati pa ohranja varno preverjanje pristnosti. Na primer, uporabnik, ki brska po zavarovani finančni nadzorni plošči, ne bi bil po nepotrebnem preusmerjen ali odjavljen; namesto tega se nov žeton pridobi in uporabi v ozadju. 🔄

Poleg tega ima BehaviorSubject ključno vlogo z upravljanjem stanja postopka osveževanja. Ta pripomoček RxJS lahko obdrži zadnjo oddano vrednost, kar je še posebej koristno, ko več zahtev hkrati naleti na napako 401. Namesto sprožitve večkratnih osvežitev prestreznik sproži samo eno osvežitev žetona, vse druge zahteve pa so postavljene v čakalno vrsto, da čakajo na to obnovitev posameznega žetona. Uporaba BehaviorSubject s switchMap pomaga zagotoviti, da bodo vse druge zahteve, ki potrebujejo nov žeton, uporabile posodobljene poverilnice, ne da bi povzročile ponavljajoče se klice osveževanja, če ena zahteva sproži osvežitev. Ta funkcija je izjemno koristna v primerih, ko imajo uporabniki morda več odprtih zavihkov ali pa aplikacija upravlja več hkratnih omrežnih klicev, s čimer prihrani vire in se izogne ​​čezmerni obremenitvi strežnika.

Preizkušanje te logike prestreznika je bistveno tudi za zagotovitev, da deluje v različnih scenarijih, zato vključujemo HttpTestingController. To orodje za testiranje Angular nam omogoča simulacijo in testiranje odzivov HTTP, kot je status 401 Nepooblaščeno, v nadzorovanem okolju. Z uporabo metode flush, ki jo ponuja HttpTestingController, lahko razvijalci simulirajo odzive na napake v resničnem svetu in preverijo, ali se prestreznik obnaša po pričakovanjih. Ta pristop testiranja nam omogoča, da pred uvedbo aplikacije izboljšamo, kako dobro logika osveževanja obravnava različne primere. S temi metodami prestreznik ne le varno ohranja sejo, ampak tudi zagotavlja bolj brezhibno in stabilno izkušnjo za uporabnike, ki krmarijo po aplikaciji. 👩‍💻

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

Razširitev strategij osveževanja žetonov JWT z prestrezniki Angular

Kritičen vidik uporabe Angularja Prestreznik žetonov JWT za varne aplikacije učinkovito obravnava kompleksnost upravljanja preverjanja pristnosti in poteka seje. Poleg zgolj lovljenja napak 401 in osveževanja žetonov je bistveno razmišljati o obravnavanju več zahtev in o tem, kako optimizirati osvežitve žetonov. Ko več zahtev hkrati naleti na napako 401, je lahko implementacija čakalne vrste ali mehanizma za zaklepanje izjemno uporabna, da zagotovite, da se naenkrat pojavi samo ena osvežitev žetona. Ta pristop preprečuje nepotrebne klice API-ja in zmanjšuje obremenitev, zlasti v aplikacijah z velikim prometom, hkrati pa omogoča nadaljevanje vseh zahtev v čakalni vrsti po osvežitvi.

Prestrezniki Angular nam prav tako omogočajo, da poenostavimo, kako obravnavamo shranjevanje in iskanje žetonov. Namesto trdega kodiranja žetonov v lokalnem pomnilniku je najbolje uporabiti Angularjev HttpOnly piškotki in zaščito CSRF za večjo varnost. S piškotki HttpOnly JavaScript ne more dostopati ali manipulirati z JWT, kar močno izboljša varnost, a doda nov izziv: zagotoviti, da zahteve samodejno prevzamejo osveženi piškotek. Angular je vgrajen withCredentials možnost je rešitev, ki brskalniku naroči, naj vključi te piškotke ob vsaki zahtevi.

V produkcijskem okolju je priporočljivo zagnati preizkuse zmogljivosti o tem, kako se aplikacija obnaša pod obremenitvijo z osvežitvami žetonov. Nastavitve testiranja lahko simulirajo velike količine zahtev, kar zagotavlja, da se logika prestreznika učinkovito spreminja. V praksi ta nastavitev zmanjša tveganje napak, povezanih z žetoni, ki vplivajo na uporabniško izkušnjo. Strategija prestreznika, če je združena s pravilnim ravnanjem s piškotki in testiranjem, pomaga vzdrževati brezhibno, uporabniku prijazno in varno aplikacijo – ne glede na to, ali aplikacija upravlja kritične finančne podatke ali uporabniške seje družbene platforme. 🌐🔐