JWT-päivitystunnisteen käsittelyn ratkaiseminen kulmassa HttpInterceptorilla

Saumattoman JWT-virkistymisen varmistaminen kulmasieppareissa

Verkkosovelluksessa, jossa on suojatut käyttäjäistunnot, lyhytikäisten JWT-tunnusten tehokas hallinta on keskeistä keskeytymättömän käyttökokemuksen kannalta. Kun tunnukset vanhenevat, käyttäjät kohtaavat usein ongelmia, kuten pakotetun uudelleenkirjautumisen, mikä voi olla turhauttavaa ja häiritä käyttäjien sitoutumista. Tämän ratkaisemiseksi kehittäjät ottavat yleensä käyttöön automaattisen tunnuksen päivityksen käyttämällä Angular-sieppaajaa vanhentuneiden istuntojen käsittelemiseen. 🕰️

Tämä lähestymistapa sisältää HTTP-pyyntöjen sieppaamisen, 401-virheiden (luvattomien pyyntöjen) havaitsemisen ja sitten päivitysprosessin käynnistämisen uuden tunnuksen saamiseksi. Ongelmia voi kuitenkin syntyä sen varmistamisessa, että päivitetty tunnus tai eväste käytetään uudelleen yritettyihin pyyntöihin. Jos uusi tunnus ei leviä oikein, uudelleenyritys voi epäonnistua, jolloin käyttäjät saavat saman valtuutusvirheen ja mahdollisesti häiritsevät sovellusten työnkulkua.

Tässä oppaassa käymme läpi tämän sieppaajamallin käytännön toteutuksen. Tarkastelemme, kuinka havaitsemme virheet, päivitämme tunnukset ja varmistamme, että pyynnöt yrittävät uudelleen kelvollisilla valtuutuksilla. Tämä lähestymistapa minimoi keskeytykset ja antaa sinulle mahdollisuuden hallita istunnon uusimisprosessia.

Lopulta saat käsityksen siitä, miten voit korjata yleisiä sudenkuoppia, kuten HttpOnly-evästeiden käsittelyä ja päivitysjaksojen hallintaa suurten pyyntöjen aikana. Tämä menetelmä varmistaa, että sovelluksesi voi ylläpitää suojattua ja sujuvaa käyttäjäistuntoa ilman jatkuvia kirjautumisia. 🔒

Luotettavan JWT-todennuksen varmistaminen kulmasieppaajilla

Yllä olevassa esimerkissä sieppaaja on suunniteltu automaattisesti päivittämään lyhytikäinen JWT-tunnus aina, kun 401-virhe havaitaan. Tällainen asetus on välttämätön sovelluksissa, joissa on arkaluontoisia tietoja, joissa istunnon turvallisuuden ylläpitäminen on kriittistä, mutta käyttökokemusta ei pidä keskeyttää. Sieppaaja havaitsee 401 (luvaton) -virheen ja käynnistää päivitystunnisteen pyynnön istunnon uusimiseksi ilman, että käyttäjä tarvitsee todennusta uudelleen. Tämän prosessin käynnistää catchError-funktio, joka mahdollistaa virheiden käsittelyn havaittavassa liukuhihnassa. Tässä kaikki HTTP-virheet, erityisesti 401, ilmoittavat, että token on todennäköisesti vanhentunut, ja käynnistää päivitysprosessin.

SwitchMap-toiminto on toinen keskeinen elementti tässä; se luo uuden havaittavan virran päivitetylle pyynnölle, joka korvaa vanhan havaittavan peruuttamatta koko kulkua. Päivityksen jälkeen se yrittää uudelleen alkuperäisen pyynnön ja varmistaa, että uusi tunnus otetaan käyttöön. Vaihtamalla vanhasta havaittavasta uuteen sieppaaja voi suorittaa tunnuksen uusimisen saumattomasti, estämättä. Tämä tekniikka on erityisen arvokas työskenneltäessä reaaliaikaisten sovellusten kanssa, koska se vähentää keskeytyksiä käyttäjien vuorovaikutuksessa säilyttäen silti suojatun todennuksen. Esimerkiksi suojattua taloushallintapaneelia selaavaa käyttäjää ei ohjata uudelleen tai kirjata ulos tarpeettomasti. sen sijaan uusi tunnus hankitaan ja sitä käytetään taustalla. 🔄

Lisäksi BehaviorSubject on tärkeä rooli päivitysprosessin tilan hallinnassa. Tämä RxJS-apuohjelma voi säilyttää viimeksi lähetetyn arvon, mikä on erityisen hyödyllistä, kun useat pyynnöt kohtaavat 401-virheen samanaikaisesti. Useiden päivitysten käynnistämisen sijaan sieppaaja käynnistää vain yhden tunnuksen päivityksen, ja kaikki muut pyynnöt asetetaan jonoon odottamaan tätä yhden tunnuksen uusimista. BehaviorSubjectin käyttäminen switchMapin kanssa auttaa varmistamaan, että jos yksi pyyntö laukaisee päivityksen, kaikki muut uuden tunnuksen tarvitsevat pyynnöt käyttävät päivitettyjä valtuustietoja aiheuttamatta toistuvia päivityskutsuja. Tämä ominaisuus on erittäin hyödyllinen tapauksissa, joissa käyttäjillä voi olla useita avoimia välilehtiä tai sovellus hallitsee useita samanaikaisia ​​verkkopuheluita, mikä säästää resursseja ja välttää liiallisen palvelimen kuormituksen.

Tämän sieppaajan logiikan testaaminen on myös välttämätöntä sen varmistamiseksi, että se toimii eri skenaarioissa, minkä vuoksi sisällytämme siihen HttpTestingControllerin. Tämän Angular-testaustyökalun avulla voimme simuloida ja testata HTTP-vastauksia, kuten 401 Unauthorized -tilaa, valvotussa ympäristössä. Käyttämällä flush-menetelmää, HttpTestingControllerin tarjoamaa menetelmää, kehittäjät voivat simuloida todellisia virhereaktioita ja varmistaa, että sieppaaja toimii odotetulla tavalla. Tämän testaustavan avulla voimme tarkentaa, kuinka hyvin päivityslogiikka käsittelee erilaisia ​​tapauksia ennen sovelluksen käyttöönottoa. Näillä menetelmillä sieppaaja ei vain säilytä istuntoa turvallisesti, vaan tarjoaa myös saumattomamman ja vakaamman käyttökokemuksen sovelluksessa liikkuville käyttäjille. 👩‍💻

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

Laajennamme JWT Token Refresh -strategioita Angular Sieppariin

Kriittinen näkökohta Angularin käytössä JWT-tunnuksen sieppaaja turvallisille sovelluksille käsittelee tehokkaasti todennuksen ja istunnon vanhenemisen hallinnan monimutkaisia ​​asioita. Pelkän 401-virheiden havaitsemisen ja merkkien päivittämisen lisäksi on tärkeää miettiä usean pyynnön käsittelyä ja tunnuksen päivityksen optimointia. Kun useat pyynnöt kohtaavat 401-virheen samanaikaisesti, jonon tai lukitusmekanismin toteuttaminen voi olla erittäin hyödyllistä varmistaakseen, että vain yksi tunnuksen päivitys tapahtuu kerrallaan. Tämä lähestymistapa estää tarpeettomat API-kutsut ja vähentää kuormitusta, erityisesti paljon liikennettä käyttävissä sovelluksissa, samalla kun kaikki jonossa olevat pyynnöt voivat jatkua päivityksen jälkeen.

Angularin sieppaajien avulla voimme myös virtaviivaistaa tapaa, jolla käsittelemme merkkien tallentamista ja hakua. Kovakoodauksen sijasta paikallisessa tallennustilassa on parasta käyttää Angular'sia HttpOnly-evästeet ja CSRF-suojaus turvallisuuden parantamiseksi. HttpOnly-evästeiden avulla JavaScript ei voi käyttää tai muokata JWT:tä, mikä parantaa huomattavasti turvallisuutta, mutta lisää uuden haasteen: varmistaa, että pyynnöt poimivat päivitetyn evästeen automaattisesti. Angularin sisäänrakennettu withCredentials vaihtoehto on ratkaisu, joka käskee selaimen sisällyttämään nämä evästeet jokaiseen pyyntöön.

Tuotantoympäristössä on suositeltavaa suorittaa suorituskykytestejä sen selvittämiseksi, kuinka sovellus käyttäytyy kuormituksen alaisena tunnuksen päivityksen yhteydessä. Testausasetukset voivat simuloida suuria pyyntömääriä ja varmistaa, että sieppaajan logiikka skaalautuu tehokkaasti. Käytännössä tämä asetus minimoi käyttäjäkokemukseen vaikuttavien merkkiin liittyvien virheiden riskin. Sieppausstrategia yhdistettynä asianmukaiseen evästeiden käsittelyyn ja testaukseen auttaa ylläpitämään saumatonta, käyttäjäystävällistä ja turvallista sovellusta – hallitseepa sovellus kriittistä talousdataa tai sosiaalisen alustan käyttäjäistuntoja. 🌐🔐