Вирішення JWT Refresh Token Handling в Angular за допомогою HttpInterceptor

Забезпечення безперебійного оновлення JWT у перехоплювачах Angular

У веб-програмі із захищеними сеансами користувача ефективне керування короткочасними токенами JWT є вирішальним для безперервної взаємодії з користувачем. Коли термін дії токенів закінчується, користувачі часто стикаються з такими проблемами, як примусовий повторний вхід, що може бути неприємним і перешкоджати взаємодії користувача. Щоб вирішити цю проблему, розробники зазвичай впроваджують автоматичне оновлення токенів за допомогою перехоплювача Angular для обробки прострочених сеансів. 🕰️

Цей підхід передбачає перехоплення HTTP-запитів, перелов помилок 401 (неавторизованих запитів), а потім виклик процесу оновлення для отримання нового токена. Однак можуть виникнути проблеми із забезпеченням застосування оновленого маркера або файлу cookie до повторних запитів. Якщо новий маркер не розповсюджується належним чином, повторна спроба може виявитися невдалою, залишаючи користувачам ту саму помилку авторизації та потенційно порушуючи робочі процеси програми.

У цьому посібнику ми розглянемо практичну реалізацію цього шаблону перехоплювача. Ми розглянемо, як виявляти помилки, оновлювати маркери та підтверджувати, що запити повторюються з дійсною авторизацією. Цей підхід мінімізує переривання, надаючи вам контроль над процесом поновлення сесії.

Наприкінці ви дізнаєтесь, як усунути типові підводні камені, як-от обробка HttpOnly cookies і керування послідовністю оновлення під час великої кількості запитів. Цей метод гарантує, що ваша програма може підтримувати безпечний, плавний сеанс користувача без постійних входів. 🔒

Забезпечення надійної автентифікації JWT за допомогою перехоплювачів Angular

У наведеному вище прикладі перехоплювач призначений для автоматичного оновлення короткочасного JWT-токена щоразу, коли виникає помилка 401. Такий тип налаштувань важливий у програмах із конфіденційними даними, де підтримка безпеки сеансу має вирішальне значення, але робота користувача не повинна перериватися. Перехоплювач виявляє помилку 401 (Unauthorized) і ініціює запит маркера оновлення, щоб поновити сеанс, не вимагаючи від користувача повторної автентифікації. Цей процес ініціюється функцією catchError, яка дозволяє обробляти помилки в спостережуваному конвеєрі. Тут будь-яка помилка HTTP, зокрема 401, сигналізує про те, що термін дії маркера, ймовірно, закінчився, і ініціює процес оновлення.

Функція switchMap є ще одним ключовим елементом тут; він створює новий обсервабельний потік для оновленого запиту, замінюючи старий обсервабель, не скасовуючи весь потік. Після оновлення він повторює вихідний запит, гарантуючи, що новий маркер застосовано. Перемикаючись зі старого спостережуваного на новий, перехоплювач може виконувати оновлення маркера безперебійним способом без блокування. Цей метод особливо цінний під час роботи з програмами в реальному часі, оскільки він зменшує переривання взаємодії користувачів, зберігаючи безпечну автентифікацію. Наприклад, користувач, який переглядає захищену фінансову інформаційну панель, не буде переспрямований або виходить із системи без потреби; натомість новий маркер отримується та застосовується у фоновому режимі. 🔄

Крім того, BehaviorSubject відіграє вирішальну роль, керуючи станом процесу оновлення. Ця утиліта RxJS може зберігати останнє видане значення, що особливо корисно, коли кілька запитів стикаються з помилкою 401 одночасно. Замість того, щоб запускати кілька оновлень, перехоплювач ініціює лише одне оновлення маркера, а всі інші запити ставляться в чергу для очікування цього єдиного оновлення маркера. Використання BehaviorSubject із switchMap допомагає гарантувати, що якщо один запит ініціює оновлення, усі інші запити, які потребують нового маркера, використовуватимуть оновлені облікові дані, не викликаючи повторних викликів оновлення. Ця функція надзвичайно корисна у випадках, коли користувачі можуть мати кілька відкритих вкладок або програма керує декількома одночасними мережевими викликами, таким чином економлячи ресурси та уникаючи надмірного навантаження на сервер.

Перевірка цієї логіки перехоплювача також є важливою для забезпечення її роботи в різних сценаріях, тому ми включаємо HttpTestingController. Цей інструмент тестування Angular дає нам змогу симулювати та тестувати HTTP-відповіді, як-от статус 401 Unauthorized, у контрольованому середовищі. Використовуючи flush, метод, наданий HttpTestingController, розробники можуть симулювати реальні реакції на помилки та перевіряти, що перехоплювач поводиться належним чином. Цей підхід до тестування дозволяє нам уточнити, наскільки добре логіка оновлення обробляє різні випадки перед розгортанням програми. За допомогою цих методів перехоплювач не тільки надійно зберігає сеанс, але й забезпечує більш плавну та стабільну роботу для користувачів, які переміщуються програмою. 👩‍💻

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

Розширення стратегій оновлення токенів JWT за допомогою перехоплювачів Angular

Критичний аспект використання Angular Перехоплювач токенів JWT для безпечних програм ефективно справляється зі складнощами керування автентифікацією та закінченням сеансу. Крім простого виявлення помилок 401 і оновлення маркерів, важливо подумати про обробку кількох запитів і оптимізувати оновлення маркерів. Коли кілька запитів стикаються з помилкою 401 одночасно, реалізація черги або механізму блокування може бути надзвичайно корисною, щоб гарантувати, що оновлення лише одного маркера відбувається одночасно. Цей підхід запобігає непотрібним викликам API і зменшує навантаження, особливо в програмах із високим трафіком, одночасно дозволяючи всім запитам у черзі виконуватися після оновлення.

Перехоплювачі Angular також дозволяють нам оптимізувати те, як ми обробляємо зберігання та отримання токенів. Замість жорсткого кодування токенів у локальному сховищі краще використовувати Angular Файли cookie лише Http і захист CSRF для підвищення безпеки. За допомогою файлів cookie HttpOnly JavaScript не може отримати доступ до JWT або маніпулювати ним, що значно покращує безпеку, але додає нову проблему: гарантувати, що запити отримують оновлені файли cookie автоматично. Вбудований Angular withCredentials Параметр — це рішення, яке вказує браузеру включати ці файли cookie під час кожного запиту.

У робочому середовищі доцільно проводити тести продуктивності, щоб перевірити, як програма поводиться під навантаженням із оновленням маркерів. Налаштування тестування можуть імітувати великі обсяги запитів, забезпечуючи ефективне масштабування логіки перехоплювача. На практиці це налаштування мінімізує ризик помилок, пов’язаних із маркерами, які впливають на роботу користувача. Стратегія перехоплення в поєднанні з належною обробкою файлів cookie та тестуванням допомагає підтримувати безперебійну, зручну та безпечну програму — незалежно від того, чи програма керує критично важливими фінансовими даними чи сеансами користувачів соціальної платформи. 🌐🔐