Executando verificação de segurança...
6
fabiobrasileiro
2 min de leitura ·

Como criar um interceptador genérico para toda requisição feita no Next.js que, ao receber status 401, redirecione para a rota "/"?

No Angular, utilizo o handlerError como um serviço para isso, configurando o Observable para exibir um toast informando que o usuário será redirecionado para a página de login ("/"). No entanto, ainda não encontrei a melhor forma de fazer isso no Next.js e não estou usando o auth.js do Next.js, apenas minha API do backend para autenticação.

Pelo que li na documentação do Next.js, não é ideal colocar interceptadores de requisições HTTP dentro do middleware, pois isso pode deixar a aplicação extremamente lenta.

Então, qual seria a melhor abordagem para criar um interceptador a nível de requisição, de modo que, toda vez que esse evento ocorrer, eu redirecione para a rota ("/") e chame o toast?

Logíca que tentei implementar, mas não estar direcionando automaticamente:


"use server";

import { Constants } from "@/core/constants/constants";
import { cookieDecrypt } from "./cookiedecrypt";
import { getHttpOptions } from "@/shared/utils/http-utils";
import { cleanAllConta } from "./cleanConta";
import { redirect } from "next/navigation";
import { toast } from "sonner";

export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
  let response = await fetch(url, options);

  if (response.status === 401) {
    console.warn("Token expirado, redirecionando...");

    // Exibe o toast para o usuário
    toast.error("Sessão expirada! Redirecionando para login...");

    // Limpa os dados da conta
    await cleanAllConta();

    // Redireciona para a tela de login
    redirect("/");

    return response; // Isso nunca será executado, pois `redirect` interrompe a execução
  }

  return response;
}

saida no terminal:

Token expirado, redirecionando...
❌ Erro em resumoTransacaoAction: Error: NEXT_REDIRECT
    at fetchWithAuth (src/core/lib/actions/painelDashboard.ts:39:13)
    at async resumoTransacaoAction (src/core/lib/actions/painelDashboard.ts:64:21)
  37 |     // Redireciona para a tela de login
  38 |     // O cliente vai lidar com a limpeza do localStorage após o redirecionamento
> 39 |     redirect("/")
     |             ^
  40 |   }
  41 |
  42 |   return response {
  digest: 'NEXT_REDIRECT;push;/;307;'

Lendo a documentação, encontrei a função unauthorized, que é uma lógica própria do Next.js para tratar esses erros. No entanto, ela ainda está em fase experimental.

unauthorized

unauthorized

Fonte: https://nextjs.org/docs/pages/building-your-application/routing/middleware

Carregando publicação patrocinada...
2
snybool

Cara eu acho que o middleware do nextjs pode fazer isso, no react eu faço usando axios eu uso o interceptors.request.

import axios from 'axios';
const instance = axios.create({
baseURL: window.location.hostname === 'localhost' ? 'http://localhost:5001/api/v1' : 'https://api.mysite.com/api/v1'
});
instance.defaults.headers.common['Content-Type'] = 'multipart/form-data';
//validate response
instance.interceptors.response.use((response) => {
return response;
}, (error) => {
if (error.response.status === 401) {
return window.location.href = '/login'
}
return Promise.reject(error);
});
// Set the AUTH token for any request
instance.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token');
config.headers.Authorization = token ? Bearer ${token} : '';
return config;
}
)
export default instance;

1