JWT värskendamislubade käsitsemise lahendamine nurgas HttpInterceptoriga

JWT pealtkuulaja juurutamine koos Angular: Error Handling & Refresh Token Solutioniga

Modulaarse teenusestruktuuriga Angular kasutamine vigade käsitlemiseks ja seansi haldamiseks

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

JWT pealtkuulaja märgi värskendamise käsitsemise nurgakatse

JWT värskenduse ja HTTP-tõrkekäsitluse testimine Angulari pealtkuulajas

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

Levinud küsimused JWT žetoonide käsitsemise kohta nurga pealtkuulajatega

1. Kuidas teeb catchError abi JWT märgi käsitlemisel?
2. Kasutades catchError pealtkuulaja sees võimaldab meil tuvastada 401 tõrkeid ja käivitada žetoonide aegumisel sujuvalt loa värskendamise taotlused.
3. Miks on BehaviorSubject asemel kasutatakse Subject värskendusoleku jälgimiseks?
4. BehaviorSubject säilitab viimati väljastatud väärtuse, muutes selle kasulikuks samaaegsete taotluste värskendusolekute haldamiseks ilma mitut värskenduskutset käivitamata.
5. Mis roll teeb switchMap mängida HTTP-päringute uuesti proovimist?
6. switchMap võimaldab lülituda vaadeldavalt märgi värskendamiselt uuesti proovitud HTTP-päringule, tagades ainult viimase jälgitava lõpuleviimise.
7. Kuidas saan pealtkuulajat Angularis testida?
8. Nurga oma HttpTestingController on kasulik HTTP-vastuste, sealhulgas 401-tõrgete, simuleerimiseks, et kontrollida, kas pealtkuulaja loogika töötab õigesti.
9. Miks kasutada withCredentials kloonitud taotluses?
10. The withCredentials lipp tagab turvalise HttpOnly küpsise lisamise igale päringule, mis on oluline turvaliste seansside säilitamiseks.
11. Kuidas optimeerida loa värskendamise käitlemist tiheda liikluse korral?
12. Kasutades singlit BehaviorSubject või lukustusmehhanism võib aidata vältida mitut värskendustaotlust, parandades jõudlust suure liiklusega stsenaariumide korral.
13. Kuidas mõjutab pealtkuulaja kasutajakogemust seansi aegumisel?
14. Püüdur võimaldab automaatset seanssi uuendamist, nii et kasutajad ei logitaks ootamatult välja, võimaldades sujuvamat kasutuskogemust.
15. Kuidas teeb clone abi taotluste muutmisel?
16. clone loob taotlusest koopia muudetud omadustega, nagu säte withCredentials, ilma algset taotlust muutmata.
17. Kas pealtkuulaja töötab mitme kasutajaseansiga?
18. Jah, kuid iga seanss peab oma JWT-d iseseisvalt haldama või värskendusloogika tuleks kohandada mitme seansi jaoks.
19. Kas pealtkuulaja suudab toime tulla muude kui 401 vigadega?
20. Jah, pealtkuulajat saab laiendada, et tuvastada muid tõrkeid, näiteks 403 Forbidden, ja neid parema kasutuskogemuse saavutamiseks asjakohaselt käsitleda.

JWT märgi värskendamise sujuvamaks muutmine nurkrakendustes

Tõhus JWT märgihaldus on ülioluline nii kasutajakogemuse kui ka turvalisuse parandamiseks Angular-rakendustes. Rakendades pealtkuulaja 401 vigade tabamiseks ja automaatse loa värskendamise algatamiseks, saate vältida sunnitud väljalogimisi ja pakkuda sujuvat kasutajavoogu. Lisaks samaaegsete taotluste käsitlemine värskendamise ajal, kasutades BehaviorSubject, tagab ainult ühe värskenduskutse, optimeerides ressursside kasutust.

Lõppkokkuvõttes on eesmärk leida tasakaal turvalisuse ja kasutajamugavuse vahel. Püüduri loogika regulaarne testimine ja täiustamine reaalsete stsenaariumide jaoks võimaldab teie rakendusel probleemideta käsitleda suuri taotlusi. Tokenide haldamise parimate tavade kasutuselevõtt võib aidata säilitada turvalist ja kasutajasõbralikku kogemust kogu seansi jooksul. 👨‍💻