Решение проблемы обработки токена обновления JWT в Angular с помощью HttpInterceptor

Обеспечение плавного обновления JWT в перехватчиках Angular

В веб-приложении с безопасными пользовательскими сеансами эффективное управление краткосрочными токенами JWT имеет решающее значение для бесперебойной работы пользователей. Когда срок действия токенов истекает, пользователи часто сталкиваются с такими проблемами, как необходимость повторного входа в систему, что может расстраивать и нарушать взаимодействие с пользователем. Чтобы решить эту проблему, разработчики обычно реализуют автоматическое обновление токена, используя перехватчик Angular для обработки истекших сеансов. 🕰️

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

В этом руководстве мы рассмотрим практическую реализацию этого шаблона перехватчика. Мы рассмотрим, как обнаруживать ошибки, обновлять токены и подтверждать повторение запросов с действительной авторизацией. Такой подход сводит к минимуму перерывы, предоставляя вам контроль над процессом возобновления сеанса.

К концу вы получите представление о том, как устранять распространенные ошибки, такие как обработка файлов cookie только HttpOnly и управление последовательностями обновления при больших объемах запросов. Этот метод гарантирует, что ваше приложение сможет поддерживать безопасный и бесперебойный сеанс пользователя без постоянных входов в систему. 🔒

Обеспечение надежной аутентификации JWT с помощью перехватчиков Angular

В приведенном выше примере перехватчик предназначен для автоматического обновления недолговечного токена JWT при возникновении ошибки 401. Такая настройка необходима в приложениях с конфиденциальными данными, где поддержание безопасности сеанса имеет решающее значение, но работа пользователя не должна прерываться. Перехватчик улавливает ошибку 401 (неавторизованный) и инициирует запрос токена обновления для возобновления сеанса, не требуя повторной аутентификации пользователя. Этот процесс запускается функцией catchError, которая позволяет обрабатывать ошибки в наблюдаемом конвейере. Здесь любая ошибка HTTP, в частности 401, сигнализирует о том, что срок действия токена, вероятно, истек, и инициирует процесс обновления.

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

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

Тестирование этой логики перехватчика также важно для обеспечения ее работы в различных сценариях, поэтому мы включаем HttpTestingController. Этот инструмент тестирования Angular позволяет нам моделировать и тестировать ответы HTTP, такие как статус 401 «Неавторизованный», в контролируемой среде. Используя методlush, предоставляемый 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 Interceptors

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

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

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