Rješavanje JWT Refresh Tokena rukovanja u Angularu s HttpInterceptorom

Osiguravanje besprijekornog JWT osvježavanja u Angular Interceptorima

U web-aplikaciji sa sigurnim korisničkim sesijama, učinkovito upravljanje kratkotrajnim JWT tokenima ključno je za neprekinuto korisničko iskustvo. Kada tokeni isteknu, korisnici se često susreću s problemima kao što je prisiljavanje na ponovnu prijavu, što može biti frustrirajuće i poremetiti angažman korisnika. Kako bi se uhvatili u koštac s tim, programeri obično implementiraju automatsko osvježavanje tokena koristeći Angular presretač za obradu isteklih sesija. 🕰️

Ovaj pristup uključuje presretanje HTTP zahtjeva, hvatanje 401 pogreške (neovlašteni zahtjevi), a zatim pozivanje procesa osvježavanja za dobivanje novog tokena. Međutim, mogu se pojaviti problemi u osiguravanju primjene ažuriranog tokena ili kolačića na ponovljene zahtjeve. Ako se novi token ne širi ispravno, ponovni pokušaj može biti neuspješan, ostavljajući korisnike s istom pogreškom autorizacije i potencijalno ometajući tijek rada aplikacije.

U ovom ćemo vodiču proći kroz praktičnu primjenu ovog uzorka presretača. Pogledat ćemo kako uhvatiti pogreške, osvježiti tokene i potvrditi da zahtjevi pokušavaju ponovno s valjanom autorizacijom. Ovaj pristup minimalizira prekide dok vam daje kontrolu nad procesom obnove sesije.

Na kraju ćete steći uvid u to kako riješiti uobičajene zamke, poput rukovanja HttpOnly kolačićima i upravljanja sekvencama osvježavanja tijekom velikih količina zahtjeva. Ova metoda osigurava da vaša aplikacija može održavati sigurnu, glatku korisničku sesiju bez stalnih prijava. 🔒

Osiguravanje pouzdane JWT autentifikacije s Angular Interceptorima

U gornjem primjeru, presretač je dizajniran da automatski osvježi kratkotrajni JWT token kad god se naiđe na pogrešku 401. Ova vrsta postavljanja ključna je u aplikacijama s osjetljivim podacima, gdje je održavanje sigurnosti sesije ključno, ali korisničko iskustvo ne bi trebalo biti prekinuto. Presretač hvata pogrešku 401 (neovlašteno) i pokreće zahtjev za tokenom osvježavanja za obnovu sesije bez potrebe da se korisnik ponovno autentificira. Ovaj proces pokreće funkcija catchError, koja omogućuje rukovanje pogreškama unutar vidljivog cjevovoda. Ovdje svaka HTTP pogreška, posebno 401, signalizira da je token vjerojatno istekao i pokreće proces osvježavanja.

Funkcija switchMap još je jedan ključni element ovdje; stvara novi observable tok za osvježeni zahtjev, zamjenjujući stari observable bez otkazivanja cijelog toka. Nakon osvježavanja, ponovno pokušava izvorni zahtjev, osiguravajući da se novi token primjenjuje. Prebacivanjem sa starog observabla na novi, presretač može izvršiti obnavljanje tokena na neprimjetan način bez blokiranja. Ova tehnika je osobito vrijedna kada radite s aplikacijama u stvarnom vremenu, jer smanjuje prekide u korisničkim interakcijama, a istovremeno održava sigurnu autentifikaciju. Na primjer, korisnik koji pregledava zaštićenu financijsku nadzornu ploču ne bi bio nepotrebno preusmjeren ili odjavljen; umjesto toga, novi se token preuzima i primjenjuje u pozadini. 🔄

Uz to, BehaviorSubject igra ključnu ulogu upravljajući stanjem procesa osvježavanja. Ovaj uslužni program RxJS može zadržati zadnju emitiranu vrijednost, što je posebno korisno kada više zahtjeva naiđe na pogrešku 401 u isto vrijeme. Umjesto pokretanja višestrukih osvježavanja, presretač inicira samo jedno osvježavanje tokena, a svi ostali zahtjevi stavljeni su u red čekanja za ovu obnovu jednog tokena. Korištenje BehaviorSubjecta sa switchMapom osigurava da će, ako jedan zahtjev pokrene osvježavanje, svi ostali zahtjevi kojima je potreban novi token koristiti ažurirane vjerodajnice bez izazivanja ponovljenih poziva osvježavanja. Ova je značajka iznimno korisna u slučajevima kada korisnici mogu imati više otvorenih kartica ili kada aplikacija upravlja s nekoliko istodobnih mrežnih poziva, čime se štede resursi i izbjegava pretjerano opterećenje poslužitelja.

Testiranje ove logike presretača također je bitno kako bi se osiguralo da radi u različitim scenarijima, zbog čega uključujemo HttpTestingController. Ovaj Angular alat za testiranje omogućuje nam simulaciju i testiranje HTTP odgovora, poput statusa 401 Neovlašteno, u kontroliranom okruženju. Koristeći ispiranje, metodu koju pruža HttpTestingController, programeri mogu simulirati odgovore na pogreške u stvarnom svijetu i provjeriti ponaša li se presretač očekivano. Ovaj pristup testiranju omogućuje nam da preciziramo koliko dobro logika osvježavanja obrađuje različite slučajeve prije implementacije aplikacije. Ovim metodama presretač ne samo da čuva sesiju na siguran način, već također pruža besprijekornije, stabilnije iskustvo za korisnike koji se kreću aplikacijom. 👩‍💻

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

Proširivanje strategija osvježavanja JWT tokena s Angular Interceptorima

Kritični aspekt korištenja Angulara JWT presretač tokena za sigurne aplikacije učinkovito rješava složenost upravljanja autentifikacijom i istekom sesije. Osim pukog hvatanja pogrešaka 401 i osvježavanja tokena, bitno je razmišljati o rukovanju s više zahtjeva i kako optimizirati osvježavanja tokena. Kada više zahtjeva istovremeno naiđe na pogrešku 401, implementacija mehanizma čekanja ili zaključavanja može biti izuzetno korisna kako bi se osiguralo da se odjednom događa samo jedno osvježavanje tokena. Ovaj pristup sprječava nepotrebne API pozive i smanjuje opterećenje, posebno u aplikacijama s velikim prometom, dok dopušta da se svi zahtjevi u redu čekanja nastave nakon osvježavanja.

Angularovi presretači također nam omogućuju da pojednostavimo način na koji rukujemo pohranom i dohvaćanjem tokena. Umjesto tvrdog kodiranja tokena u lokalnoj pohrani, najbolje je koristiti Angularov HttpOnly kolačići i CSRF zaštita za povećanje sigurnosti. Uz HttpOnly kolačiće, JWT-u se ne može pristupiti ili njime manipulirati JavaScript, što uvelike poboljšava sigurnost, ali dodaje novi izazov: osiguravanje da zahtjevi automatski preuzimaju osvježeni kolačić. Angular je ugrađen withCredentials opcija je rješenje, nalažući pregledniku da uključi te kolačiće na svaki zahtjev.

U produkcijskom okruženju preporučljivo je pokrenuti testove izvedbe kako se aplikacija ponaša pod opterećenjem s osvježavanjem tokena. Postavke testiranja mogu simulirati velike količine zahtjeva, osiguravajući učinkovito skaliranje presretačke logike. U praksi, ova postavka smanjuje rizik od pogrešaka povezanih s tokenom koje utječu na korisničko iskustvo. Strategija presretača, kada je uparena s pravilnim rukovanjem kolačićima i testiranjem, pomaže u održavanju besprijekorne, korisniku prilagođene i sigurne aplikacije – bez obzira upravlja li aplikacija kritičnim financijskim podacima ili korisničkim sesijama društvene platforme. 🌐🔐