Řešení JWT Refresh Token Handling v Angular pomocí HttpInterceptor

Zajištění bezproblémového obnovení JWT v úhlových interceptorech

Ve webové aplikaci se zabezpečenými uživatelskými relacemi je efektivní správa krátkodobých tokenů JWT zásadní pro nepřerušovaný uživatelský zážitek. Když vyprší platnost tokenů, uživatelé se často setkávají s problémy, jako je nucené opětovné přihlášení, což může být frustrující a narušit zapojení uživatelů. Aby se to vyřešilo, vývojáři běžně implementují automatické obnovení tokenu pomocí Angular interceptoru ke zpracování relací, jejichž platnost vypršela. 🕰️

Tento přístup zahrnuje zachycení požadavků HTTP, zachycení chyb 401 (neautorizovaných požadavků) a následné vyvolání procesu aktualizace pro získání nového tokenu. Mohou však nastat problémy se zajištěním, aby byl aktualizovaný token nebo soubor cookie aplikován na opakované požadavky. Pokud se nový token nešíří správně, opakování může selhat, takže uživatelé budou mít stejnou chybu autorizace a potenciálně naruší pracovní postupy aplikace.

V této příručce si projdeme praktickou implementaci tohoto vzoru zachycovačů. Podíváme se na to, jak zachytit chyby, obnovit tokeny a potvrdit, že požadavky na opakování s platnou autorizací. Tento přístup minimalizuje přerušení a zároveň vám dává kontrolu nad procesem obnovení relace.

Na konci získáte přehled o tom, jak řešit běžná úskalí, jako je manipulace s HttpOnly cookie a správa obnovovacích sekvencí při velkém objemu požadavků. Tato metoda zajišťuje, že vaše aplikace může udržovat bezpečnou a hladkou uživatelskou relaci bez neustálého přihlašování. 🔒

Zajištění spolehlivé autentizace JWT pomocí úhlových interceptorů

Ve výše uvedeném příkladu je interceptor navržen tak, aby automaticky obnovoval krátkodobý JWT token, kdykoli dojde k chybě 401. Tento druh nastavení je nezbytný v aplikacích s citlivými daty, kde je kritické zachování zabezpečení relace, ale uživatelská zkušenost by neměla být přerušena. Zachycovač zachytí chybu 401 (Neautorizováno) a zahájí požadavek na obnovení tokenu k obnovení relace, aniž by uživatel vyžadoval opětovné ověření. Tento proces je spuštěn funkcí catchError, která umožňuje zpracování chyb v rámci pozorovatelného potrubí. Zde jakákoli chyba HTTP, konkrétně 401, signalizuje, že platnost tokenu pravděpodobně vypršela, a zahájí proces aktualizace.

Funkce switchMap je zde dalším základním prvkem; vytvoří nový pozorovatelný tok pro obnovený požadavek a nahradí starý pozorovatelný tok bez zrušení celého toku. Po obnovení zopakuje původní požadavek a zajistí, aby byl použit nový token. Přepnutím ze staré pozorovatelné na novou může interceptor provést obnovu tokenu bezproblémovým a neblokujícím způsobem. Tato technika je zvláště cenná při práci s aplikacemi v reálném čase, protože snižuje přerušení uživatelských interakcí při zachování bezpečné autentizace. Například uživatel procházející zabezpečený finanční dashboard nebude zbytečně přesměrován nebo odhlášen; místo toho je nový token získán a aplikován na pozadí. 🔄

BehaviorSubject navíc hraje klíčovou roli při řízení stavu procesu obnovy. Tento obslužný program RxJS může uchovat poslední vyslanou hodnotu, což je zvláště užitečné, když více požadavků narazí na chybu 401 současně. Místo toho, aby spouštěl vícenásobné obnovení, zachycovač zahájí pouze jedno obnovení tokenu a všechny ostatní požadavky jsou zařazeny do fronty, aby čekaly na obnovení tohoto jediného tokenu. Použití BehaviorSubject s switchMap pomáhá zajistit, že pokud jeden požadavek spustí aktualizaci, všechny ostatní požadavky, které potřebují nový token, použijí aktualizované přihlašovací údaje, aniž by způsobovaly opakovaná obnovovací volání. Tato funkce je mimořádně užitečná v případech, kdy uživatelé mohou mít více otevřených karet nebo kdy aplikace spravuje několik současných síťových volání, čímž šetří zdroje a zabraňuje nadměrnému zatížení serveru.

Testování této logiky interceptoru je také nezbytné pro zajištění toho, že bude fungovat v různých scénářích, a proto zahrnujeme HttpTestingController. Tento testovací nástroj Angular nám umožňuje simulovat a testovat odpovědi HTTP, jako je stav 401 Unauthorized, v kontrolovaném prostředí. Pomocí flush, metody poskytované HttpTestingController, mohou vývojáři simulovat reakce na chyby v reálném světě a ověřit, že se interceptor chová podle očekávání. Tento testovací přístup nám umožňuje před nasazením aplikace upřesnit, jak dobře logika obnovy zvládá různé případy. S těmito metodami interceptor nejen bezpečně uchovává relaci, ale také poskytuje hladší a stabilnější zážitek pro uživatele procházející aplikací. 👩‍💻

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šíření strategií obnovování tokenů JWT o úhlové interceptory

Kritický aspekt použití Angular Zachycovač tokenů JWT pro bezpečné aplikace efektivně zvládá složitost správy ověřování a vypršení platnosti relace. Kromě pouhého zachycení chyb 401 a obnovení tokenů je důležité myslet na zpracování více požadavků a na to, jak optimalizovat obnovení tokenů. Pokud více požadavků narazí na chybu 401 současně, implementace fronty nebo zamykacího mechanismu může být velmi užitečná, aby bylo zajištěno, že dojde k obnovení pouze jednoho tokenu najednou. Tento přístup zabraňuje zbytečným voláním API a snižuje zatížení, zejména v aplikacích s vysokým provozem, a zároveň umožňuje, aby všechny požadavky ve frontě pokračovaly po aktualizaci.

Interceptory Angular nám také umožňují zjednodušit způsob, jakým zpracováváme ukládání a získávání tokenů. Spíše než pevné kódování tokenů v místním úložišti je nejlepší použít Angular's Soubory cookie HttpOnly a CSRF ochranu pro zvýšení bezpečnosti. Se soubory cookie HttpOnly nelze přistupovat k JWT ani s ním nelze manipulovat pomocí JavaScriptu, což výrazně zlepšuje zabezpečení, ale přináší novou výzvu: zajistit, aby požadavky automaticky vyzvedly obnovený soubor cookie. Angular je vestavěný withCredentials možnost je řešením, která dává prohlížeči pokyn, aby tyto soubory cookie zahrnul do každého požadavku.

V produkčním prostředí je vhodné spustit testy výkonu, jak se aplikace chová při zatížení s obnovováním tokenů. Testovací nastavení mohou simulovat velké objemy požadavků a zajistit tak efektivní škálování logiky interceptoru. V praxi toto nastavení minimalizuje riziko chyb souvisejících s tokeny, které mají dopad na uživatelskou zkušenost. Strategie interceptoru ve spojení se správným zpracováním a testováním souborů cookie pomáhá udržovat bezproblémovou, uživatelsky přívětivou a bezpečnou aplikaci – ať už aplikace spravuje kritická finanční data nebo uživatelské relace sociální platformy. 🌐🔐