Решавање руковања токеном за освежавање ЈВТ-а у Ангулар-у помоћу ХттпИнтерцептор-а

Обезбеђивање беспрекорног ЈВТ освежавања у угаоним пресретачима

У веб апликацији са безбедним корисничким сесијама, ефикасно управљање краткотрајним ЈВТ токенима је кључно за непрекидно корисничко искуство. Када токени истеку, корисници се често сусрећу са проблемима као што је принуда да се поново пријаве, што може бити фрустрирајуће и пореметити ангажовање корисника. Да би се позабавили овим, програмери обично примењују аутоматско освежавање токена користећи Ангулар пресретач за руковање сесијама које су истекле. 🕰

Овај приступ укључује пресретање ХТТП захтева, хватање 401 грешке (неовлашћених захтева), а затим позивање процеса освежавања да би се добио нови токен. Међутим, могу се појавити проблеми у обезбеђивању да се ажурирани токен или колачић примењују на поново покушане захтеве. Ако се нови токен не шири исправно, поновни покушај може бити неуспешан, остављајући кориснике са истом грешком у ауторизацији и потенцијално ометајући токове рада апликације.

У овом водичу ћемо проћи кроз практичну примену овог пресретача. Погледаћемо како да ухватимо грешке, освежимо токене и потврдимо да захтеви покушавају поново са важећим овлашћењем. Овај приступ минимизира прекиде док вам даје контролу над процесом обнављања сесије.

На крају ћете стећи увид у то како да решите уобичајене замке, као што је руковање ХттпОнли колачићима и управљање секвенцама освежавања током великог обима захтева. Овај метод осигурава да ваша апликација одржава безбедну, глатку корисничку сесију без сталних пријава. 🔒

Обезбеђивање поуздане ЈВТ аутентификације помоћу угаоних пресретача

У горњем примеру, пресретач је дизајниран да аутоматски освежава краткотрајни ЈВТ токен кад год се наиђе на грешку 401. Ова врста подешавања је неопходна у апликацијама са осетљивим подацима, где је одржавање безбедности сесије критично, али корисничко искуство не би требало да се прекида. Пресретач хвата грешку 401 (Неовлашћено) и покреће захтев за токеном за освежавање да би обновио сесију без потребе да се корисник поново аутентификује. Овај процес покреће функција цатцхЕррор, која омогућава руковање грешкама унутар видљивог цевовода. Овде свака ХТТП грешка, посебно 401, сигнализира да је токен вероватно истекао и покреће процес освежавања.

Функција свитцхМап је још један основни елемент овде; креира нови ток који се може посматрати за освежени захтев, замењујући стари видљив без отказивања целог тока. Након освежавања, он поново покушава са оригиналним захтевом, обезбеђујући да је примењен нови токен. Преласком са старог видљивог на нови, пресретач може да изврши обнављање токена на беспрекоран, неблокирајући начин. Ова техника је посебно драгоцена када се ради са апликацијама у реалном времену, јер смањује прекиде у интеракцији корисника док и даље одржава безбедну аутентификацију. На пример, корисник који прегледава безбедну финансијску контролну таблу неће бити непотребно преусмерен или одјављен; уместо тога, нови токен се добија и примењује у позадини. 🔄

Поред тога, БехавиорСубјецт игра кључну улогу у управљању стањем процеса освежавања. Овај РкЈС услужни програм може задржати последњу емитовану вредност, што је посебно корисно када више захтева истовремено наиђе на грешку 401. Уместо да покрене вишеструка освежавања, пресретач иницира само једно освежавање токена, а сви остали захтеви су стављени у ред чекања на ову обнову једног токена. Коришћење БехавиорСубјецт са свитцхМап-ом помаже да се осигура да ће, ако један захтев покрене освежавање, сви остали захтеви којима је потребан нови токен користити ажуриране акредитиве без изазивања поновљених позива за освежавање. Ова функција је изузетно корисна у случајевима када корисници могу имати више отворених картица или апликација управља са неколико истовремених мрежних позива, чиме се штеди ресурси и избегава претерано оптерећење сервера.

Тестирање ове логике пресретача је такође од суштинског значаја да би се осигурало да функционише у различитим сценаријима, због чега укључујемо ХттпТестингЦонтроллер. Овај алат за тестирање углова нам омогућава да симулирамо и тестирамо ХТТП одговоре, као што је статус 401 Унаутхоризед, у контролисаном окружењу. Користећи флусх, метод који обезбеђује ХттпТестингЦонтроллер, програмери могу симулирати одговоре на грешке у стварном свету и проверити да ли се пресретач понаша како се очекује. Овај приступ тестирању нам омогућава да прецизирамо колико добро логика освежавања обрађује различите случајеве пре него што применимо апликацију. Овим методама, пресретач не само да безбедно чува сесију, већ и пружа неприметније, стабилније искуство за кориснике који се крећу апликацијом. 👩‍💻

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

Проширивање стратегија освежавања ЈВТ токена помоћу угаоних пресретача

Критичан аспект употребе Ангулар-а Пресретач токена ЈВТ за безбедне апликације ефикасно решава сложеност управљања аутентификацијом и истеком сесије. Осим пуког хватања 401 грешке и освежавања токена, битно је размишљати о руковању више захтева и како да оптимизујете освежавања токена. Када више захтева истовремено наиђе на грешку 401, имплементација реда или механизма закључавања може бити изузетно корисна како би се осигурало да се само једно освежавање токена дешава у исто време. Овај приступ спречава непотребне АПИ позиве и смањује оптерећење, посебно у апликацијама са великим прометом, док омогућава да се сви захтеви у реду чекања наставе након освежавања.

Ангулар-ови пресретачи нам такође омогућавају да поједноставимо начин на који рукујемо складиштењем и преузимањем токена. Уместо чврстог кодирања токена у локалном складишту, најбоље је користити Ангулар ХттпОнли колачићи и ЦСРФ заштита ради побољшања безбедности. Са ХттпОнли колачићима, ЈВТ-у се не може приступити или њиме манипулисати ЈаваСцрипт, што значајно побољшава безбедност, али додаје нови изазов: обезбеђивање да захтеви аутоматски покупе освежени колачић. Ангулар је уграђен withCredentials опција је решење, налаже претраживачу да укључи ове колачиће на сваки захтев.

У производном окружењу, препоручљиво је да покренете тестове перформанси о томе како се апликација понаша под оптерећењем са освежавањем токена. Поставке за тестирање могу симулирати велике количине захтева, осигуравајући да се логика пресретача ефикасно скалира. У пракси, ово подешавање минимизира ризик да грешке у вези са токеном утичу на корисничко искуство. Стратегија пресретача, када је упарена са правилним руковањем колачићима и тестирањем, помаже у одржавању беспрекорне, прилагођене корисницима и безбедне апликације – било да апликација управља критичним финансијским подацима или корисничким сесијама друштвене платформе. 🌐🔐