Resolvendo o tratamento de token de atualização JWT em Angular com HttpInterceptor

Garantindo atualização perfeita do JWT em interceptores angulares

Em um aplicativo da web com sessões de usuário seguras, o gerenciamento eficaz de tokens JWT de curta duração é crucial para uma experiência de usuário ininterrupta. Quando os tokens expiram, os usuários geralmente enfrentam problemas como serem forçados a fazer login novamente, o que pode ser frustrante e atrapalhar o envolvimento do usuário. Para resolver isso, os desenvolvedores geralmente implementam a atualização automática de token usando um interceptor Angular para lidar com sessões expiradas. 🕰️

Essa abordagem envolve interceptar solicitações HTTP, capturar erros 401 (solicitações não autorizadas) e, em seguida, invocar um processo de atualização para obter um novo token. No entanto, podem surgir problemas para garantir que o token ou cookie atualizado seja aplicado às solicitações repetidas. Se o novo token não for propagado corretamente, a nova tentativa poderá falhar, deixando os usuários com o mesmo erro de autorização e potencialmente interrompendo os fluxos de trabalho do aplicativo.

Neste guia, veremos uma implementação prática desse padrão de interceptor. Veremos como detectar erros, atualizar tokens e confirmar se as solicitações são repetidas com autorização válida. Essa abordagem minimiza interrupções e, ao mesmo tempo, oferece controle sobre o processo de renovação da sessão.

No final, você obterá insights sobre como lidar com armadilhas comuns, como lidar com cookies HTTPOnly e gerenciar sequências de atualização durante grandes volumes de solicitações. Este método garante que seu aplicativo possa manter uma sessão de usuário segura e tranquila, sem logins constantes. 🔒

Garantindo autenticação JWT confiável com interceptores angulares

No exemplo acima, o interceptor foi projetado para atualizar automaticamente um token JWT de curta duração sempre que um erro 401 for encontrado. Esse tipo de configuração é essencial em aplicações com dados confidenciais, onde manter a segurança da sessão é fundamental, mas a experiência do usuário não deve ser interrompida. O interceptor detecta o erro 401 (Não autorizado) e inicia uma solicitação de token de atualização para renovar a sessão sem exigir que o usuário se autentique novamente. Este processo é acionado pela função catchError, que permite o tratamento de erros dentro de um pipeline observável. Aqui, qualquer erro HTTP, especificamente um 401, sinaliza que o token provavelmente expirou e inicia o processo de atualização.

A função switchMap é outro elemento central aqui; ele cria um novo fluxo observável para a solicitação atualizada, substituindo o antigo observável sem cancelar todo o fluxo. Após a atualização, ele tenta novamente a solicitação original, garantindo que o novo token seja aplicado. Ao mudar do antigo observável para um novo, o interceptador pode realizar a renovação do token de maneira contínua e sem bloqueio. Essa técnica é particularmente valiosa ao trabalhar com aplicativos em tempo real, pois reduz as interrupções nas interações do usuário e, ao mesmo tempo, mantém a autenticação segura. Por exemplo, um usuário navegando em um painel financeiro seguro não seria redirecionado ou desconectado desnecessariamente; em vez disso, o novo token é adquirido e aplicado em segundo plano. 🔄

Além disso, o BehaviorSubject desempenha um papel crucial ao gerenciar o estado do processo de atualização. Este utilitário RxJS pode reter o último valor emitido, o que é especialmente útil quando várias solicitações encontram um erro 401 ao mesmo tempo. Em vez de acionar múltiplas atualizações, o interceptor inicia apenas uma atualização de token e todas as outras solicitações são enfileiradas para aguardar a renovação desse único token. Usar BehaviorSubject com switchMap ajuda a garantir que, se uma solicitação acionar a atualização, todas as outras solicitações que precisam do novo token usarão as credenciais atualizadas sem causar chamadas de atualização repetidas. Este recurso é extremamente útil nos casos em que os usuários podem ter várias abas abertas, ou o aplicativo está gerenciando várias chamadas de rede simultâneas, economizando recursos e evitando carga excessiva do servidor.

Testar a lógica do interceptor também é essencial para garantir que ele funcione em diferentes cenários, por isso incluímos o HttpTestingController. Esta ferramenta de teste Angular nos permite simular e testar respostas HTTP, como o status 401 Não autorizado, em um ambiente controlado. Usando flush, um método fornecido pelo HttpTestingController, os desenvolvedores podem simular respostas de erro do mundo real e verificar se o interceptor se comporta conforme o esperado. Essa abordagem de teste nos permite refinar o quão bem a lógica de atualização lida com vários casos antes de implantar o aplicativo. Com esses métodos, o interceptor não apenas preserva a sessão com segurança, mas também fornece uma experiência mais integrada e estável para os usuários que navegam no aplicativo. 👩‍💻

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

Expandindo estratégias de atualização de token JWT com interceptores angulares

Um aspecto crítico do uso de um Angular Interceptador de token JWT para aplicativos seguros é lidar com eficiência com as complexidades do gerenciamento de autenticação e expiração de sessão. Além de simplesmente capturar erros 401 e atualizar tokens, é essencial pensar no tratamento de múltiplas solicitações e em como otimizar as atualizações de token. Quando várias solicitações encontram um erro 401 simultaneamente, implementar uma fila ou mecanismo de bloqueio pode ser extremamente útil para garantir que apenas uma atualização de token ocorra por vez. Essa abordagem evita chamadas de API desnecessárias e reduz a carga, especialmente em aplicativos de alto tráfego, ao mesmo tempo que permite que todas as solicitações enfileiradas continuem após a atualização.

Os interceptadores do Angular também nos permitem agilizar a forma como lidamos com o armazenamento e a recuperação de tokens. Em vez de codificar tokens no armazenamento local, é melhor usar o Angular Cookies somente HTTP e proteção CSRF para aumentar a segurança. Com os cookies HttpOnly, o JWT não pode ser acessado ou manipulado por JavaScript, melhorando muito a segurança, mas acrescentando um novo desafio: garantir que as solicitações obtenham o cookie atualizado automaticamente. Angular integrado withCredentials opção é uma solução, instruindo o navegador a incluir esses cookies em cada solicitação.

Em um ambiente de produção, é aconselhável executar testes de desempenho sobre como o aplicativo se comporta sob carga com atualizações de token. As configurações de teste podem simular grandes volumes de solicitações, garantindo que a lógica do interceptor seja dimensionada com eficiência. Na prática, esta configuração minimiza o risco de erros relacionados ao token impactarem a experiência do usuário. A estratégia de interceptação, quando combinada com o manuseio e teste adequados de cookies, ajuda a manter um aplicativo contínuo, fácil de usar e seguro – independentemente de o aplicativo gerenciar dados financeiros críticos ou sessões de usuário de uma plataforma social. 🌐🔐