Riešenie JWT Refresh Token Handling v Angular s HttpInterceptor

Zabezpečenie bezproblémového obnovenia JWT v uhlových zachytávačoch

Vo webovej aplikácii so zabezpečenými používateľskými reláciami je efektívna správa krátkodobých tokenov JWT kľúčová pre neprerušovanú používateľskú skúsenosť. Keď platnosť tokenov vyprší, používatelia sa často stretávajú s problémami, ako je napríklad nútené opätovné prihlásenie, čo môže byť frustrujúce a narúšať zapojenie používateľov. Na vyriešenie tohto problému vývojári bežne implementujú automatické obnovenie tokenov pomocou Angular interceptor na spracovanie relácií s vypršanou platnosťou. 🕰️

Tento prístup zahŕňa zachytenie požiadaviek HTTP, zachytenie 401 chýb (neautorizovaných požiadaviek) a následné vyvolanie procesu obnovenia na získanie nového tokenu. Problémy však môžu nastať pri zabezpečení použitia aktualizovaného tokenu alebo súboru cookie na opakované požiadavky. Ak sa nový token nerozšíri správne, opakovaný pokus môže zlyhať, pričom používateľom zostane rovnaká chyba autorizácie a môže dôjsť k narušeniu pracovných postupov aplikácie.

V tejto príručke si prejdeme praktickou implementáciou tohto vzorca zachytávača. Pozrieme sa na to, ako zachytiť chyby, obnoviť tokeny a potvrdiť, že žiadosti o opätovný pokus s platnou autorizáciou. Tento prístup minimalizuje prerušenia a zároveň vám dáva kontrolu nad procesom obnovy relácie.

Na konci získate prehľad o tom, ako riešiť bežné úskalia, ako je manipulácia so súbormi HttpOnly a správa obnovovacích sekvencií pri veľkých objemoch žiadostí. Táto metóda zaisťuje, že vaša aplikácia môže udržiavať bezpečnú a hladkú reláciu používateľa bez neustáleho prihlasovania. 🔒

Zabezpečenie spoľahlivého overovania JWT pomocou uhlových zachytávačov

Vo vyššie uvedenom príklade je zachytávač navrhnutý tak, aby automaticky obnovoval krátkodobý token JWT vždy, keď sa vyskytne chyba 401. Tento druh nastavenia je nevyhnutný v aplikáciách s citlivými údajmi, kde je kritické zachovanie bezpečnosti relácie, ale používateľská skúsenosť by nemala byť prerušená. Zachytávač zachytí chybu 401 (neoprávnené) a iniciuje požiadavku obnovovacieho tokenu na obnovenie relácie bez toho, aby sa od používateľa vyžadovala opätovná autentifikácia. Tento proces spúšťa funkcia catchError, ktorá umožňuje spracovanie chýb v rámci pozorovateľného potrubia. Tu akákoľvek chyba HTTP, konkrétne 401, signalizuje, že platnosť tokenu pravdepodobne vypršala a iniciuje proces obnovy.

Funkcia switchMap je tu ďalším základným prvkom; vytvorí nový pozorovateľný tok pre obnovenú požiadavku, pričom nahradí starý pozorovateľný tok bez zrušenia celého toku. Po obnovení zopakuje pôvodnú požiadavku a zabezpečí, aby sa použil nový token. Prepnutím zo starého pozorovateľného na nový môže zachytávač vykonať obnovu tokenu bezproblémovým, neblokujúcim spôsobom. Táto technika je obzvlášť cenná pri práci s aplikáciami v reálnom čase, pretože znižuje prerušenia interakcií používateľov a zároveň zachováva bezpečnú autentifikáciu. Napríklad používateľ prehliadajúci zabezpečený finančný informačný panel nebude zbytočne presmerovaný alebo odhlásený; namiesto toho sa nový token získa a použije na pozadí. 🔄

Okrem toho hrá BehaviorSubject kľúčovú úlohu pri riadení stavu procesu obnovy. Tento obslužný program RxJS dokáže zachovať poslednú vydanú hodnotu, čo je užitočné najmä vtedy, keď viacero požiadaviek narazí na chybu 401 súčasne. Namiesto spustenia viacerých obnov, zachytávač spustí iba jedno obnovenie tokenu a všetky ostatné požiadavky sú zaradené do frontu, aby čakali na obnovenie tohto jediného tokenu. Používanie BehaviorSubject s switchMap pomáha zaistiť, že ak jedna požiadavka spustí obnovenie, všetky ostatné požiadavky, ktoré potrebujú nový token, použijú aktualizované poverenia bez toho, aby spôsobovali opakované volania obnovy. Táto funkcia je mimoriadne užitočná v prípadoch, keď môžu mať používatelia viacero otvorených kariet alebo aplikácia spravuje niekoľko súčasných sieťových hovorov, čím šetrí zdroje a zabraňuje nadmernému zaťaženiu servera.

Testovanie tejto logiky zachytávača je tiež nevyhnutné na zabezpečenie toho, aby fungovala v rôznych scenároch, a preto zahŕňame HttpTestingController. Tento testovací nástroj Angular nám umožňuje simulovať a testovať odpovede HTTP, ako je stav 401 Unauthorized, v kontrolovanom prostredí. Pomocou flush, metódy poskytovanej HttpTestingController, môžu vývojári simulovať reakcie na chyby v reálnom svete a overiť, či sa zachytávač chová podľa očakávania. Tento testovací prístup nám umožňuje pred nasadením aplikácie vylepšiť, ako dobre logika obnovenia zvláda rôzne prípady. Pomocou týchto metód interceptor nielen bezpečne uchováva reláciu, ale tiež poskytuje plynulejší a stabilnejší zážitok pre používateľov navigácie v aplikácii. 👩‍💻

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

Rozšírenie stratégií obnovenia tokenov JWT o uhlové zachytávače

Kritický aspekt používania Angular Zachytávač tokenov JWT pre bezpečné aplikácie efektívne zvláda zložitosť riadenia autentifikácie a uplynutia platnosti relácie. Okrem zachytenia chýb 401 a obnovovania tokenov je dôležité myslieť aj na spracovanie viacerých požiadaviek a na to, ako optimalizovať obnovovanie tokenov. Keď viaceré požiadavky narazia na chybu 401 súčasne, implementácia frontu alebo uzamykacieho mechanizmu môže byť mimoriadne užitočná, aby sa zabezpečilo, že sa naraz obnoví iba jeden token. Tento prístup zabraňuje zbytočným volaniam API a znižuje zaťaženie, najmä v aplikáciách s vysokou prevádzkou, pričom umožňuje, aby všetky požiadavky vo fronte pokračovali po obnovení.

Zachytávače Angular nám tiež umožňujú zefektívniť spôsob ukladania a získavania tokenov. Namiesto pevného kódovania tokenov v miestnom úložisku je najlepšie použiť Angular Súbory cookie typu HttpOnly a CSRF ochranu na zvýšenie bezpečnosti. Pomocou súborov cookie HttpOnly nie je možné pristupovať k JWT ani s ním manipulovať pomocou JavaScriptu, čím sa výrazne zlepšuje bezpečnosť, ale pridáva sa nová výzva: zabezpečenie toho, aby žiadosti automaticky prevzali obnovený súbor cookie. Angular je vstavaný withCredentials možnosť je riešením, ktoré dáva prehliadaču pokyn, aby tieto súbory cookie zahrnul do každej požiadavky.

V produkčnom prostredí sa odporúča spustiť testy výkonu, ako sa aplikácia správa pri zaťažení s obnovovaním tokenov. Testovacie nastavenia môžu simulovať veľké objemy požiadaviek, čím sa zabezpečí efektívne škálovanie logiky zachytávača. V praxi toto nastavenie minimalizuje riziko chýb súvisiacich s tokenom, ktoré ovplyvňujú používateľskú skúsenosť. Stratégia zachytávača, keď je spárovaná so správnym zaobchádzaním so súbormi cookie a testovaním, pomáha udržiavať bezproblémovú, užívateľsky prívetivú a bezpečnú aplikáciu – či už aplikácia spravuje kritické finančné údaje alebo relácie používateľov sociálnej platformy. 🌐🔐