Autenticação e Interceptors com Axios no React

Quando construímos o frontend de uma aplicação, gerenciar o envio de tokens JWT em cada requisição pode gerar muito código repetitivo. Se você faz isso manualmente a cada fetch, logo a base de código ficará insustentável.

A melhor solução é configurar uma instância única do Axios e usar Interceptors. Eles funcionam como 'middlewares' do frontend, interceptando requisições antes de saírem e respostas antes de chegarem ao seu componente.

Configurando a Instância do Axios

Criamos um arquivo dedicado (por exemplo, src/lib/api.ts) que exportará nossa instância customizada:

import axios from 'axios';

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3333',
});

Request Interceptor: Injetando o Token

Podemos ler o token (do localStorage ou nookies/cookies, caso use Next.js) e anexá-lo automaticamente no cabeçalho Authorization de todas as requisições.

api.interceptors.request.use((config) => {
  // Em Next.js SSR, certifique-se de pegar os cookies corretos
  const token = typeof window !== 'undefined' ? localStorage.getItem('@App:token') : null;

  if (token && config.headers) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
}, (error) => {
  return Promise.reject(error);
});

Response Interceptor: Tratamento de Erros e Logout

O que acontece se o token expirar? O backend vai retornar um status 401 Unauthorized. Podemos interceptar esse erro globalmente, fazer o logout forçado do usuário ou até mesmo tentar um fluxo de Refresh Token.

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      if (error.response.data?.code === 'token.expired') {
        // Aqui você chamaria a lógica de refresh token
      } else {
        // Desloga o usuário globalmente
        if (typeof window !== 'undefined') {
          localStorage.removeItem('@App:token');
          window.location.href = '/login';
        }
      }
    }

    return Promise.reject(error);
  }
);

Conclusão

Usando interceptors do Axios, a sua lógica nos componentes React fica extremamente enxuta. O componente só se preocupa em chamar api.get('/users'), e toda a 'magia' de colocar tokens, validar expiração e redirecionar acontece nos bastidores.