Se você usou Nuxt, provavelmente encontrou o prático useFetch composable:

Isso simplifica a busca de dados, mas e se você tiver uma infinidade de APIs que exigem autenticação? Adicionar cabeçalhos a cada chamada fica entediante rapidamente.

Insira os interceptadores.

Para adicionar interceptores globais, construiremos um wrapper combinável personalizado em torno de $fetch. Isso é especialmente valioso quando suas chamadas de API precisam consistentemente de cabeçalhos de autorização.

Como base, vamos usar o mesmo projeto da minha postagem anterior no blog sobre Autenticação no Nuxt 3.

vamos começar criando um novo elemento que pode ser composto na pasta de composição composables/useAuthFetch.ts

import type { UseFetchOptions } from 'nuxt/app';

const useAuthFetch = (url: string | (() => string), options: UseFetchOptions = {}) => {
  const customFetch = $fetch.create({
    baseURL: 'https://dummyjson.com',
    onRequest({ options }) {
      const token = useCookie('token');
      if (token?.value) {
        console.log('[fetch request] Authorization header created');
        options.headers = options.headers || {};
        options.headers.Authorization = `Bearer ${token.value}`;
      }
    },
    onResponse({ response }) {
      console.info('onResponse ', {
        endpoint: response.url,
        status: response?.status,
      });
    },
    onResponseError({ response }) {
      const statusMessage = response?.status === 401 ? 'Unauthorized' : 'Response failed';
      console.error('onResponseError ', {
        endpoint: response.url,
        status: response?.status,
        statusMessage,
      });
      throw showError({
        statusCode: response?.status,
        statusMessage,
        fatal: true,
      });
    },
  });

  return useFetch(url, {
    ...options,
    $fetch: customFetch,
  });
};

export default useAuthFetch;

Explicação:

• useAuthFetch: nosso elemento que pode ser composto personalizado. Leva os mesmos argumentos que useFetch.
• customFetch: Cria uma instância $fetch personalizada com interceptores.
• baseURL: Ao usar a opção baseURL, o ofetch a precede para barras finais/iniciais e consulta parâmetros de pesquisa para baseURL usando ufo:
• onRequest: Este interceptor é executado antes de cada chamada de busca. Ele pega o token de um cookie e adiciona o cabeçalho Authorization se um token estiver presente.
• onResponse: é executado após uma busca bem-sucedida, fornecendo registro.
• onResponseError: trata erros de busca, registra detalhes e gera um erro usando showError (supondo que você tenha isso definido).
• return useFetch(...): Finalmente, chamamos o useFetch original, mas passamos nosso customFetch para lidar com as solicitações reais.

você pode descobrir mais sobre os interceptadores aqui

Agora, sempre que você precisar buscar dados de uma API autenticada, basta usar useAuthFetch em vez de useFetch, e a autorização será tratada perfeitamente.

Quando você inspeciona a chamada de rede, você pode ver que o baseUrl está correto e o cabeçalho Authorization está presente

Registro

Em meus interceptores, adicionei alguns logs que podem ser úteis se você tiver ferramentas como Sentry em sua aplicação.

Como adicionar Sentry ao Nuxt: https://www.lichter.io/articles/nuxt3-sentry-recipe/

no interceptador onRequest você pode adicionar uma localização atual ao sentinela

import * as Sentry from '@sentry/vue';

Sentry.addBreadcrumb({
        type: 'http',
        category: 'xhr',
        message: ``,
        data: {
          url: `${options.baseURL}${request}`,
        },
        level: 'info',
});

se seu back-end retornar um tracingId, você também pode adicionar uma tag e um contexto com sentinela para vincular erros a um endpoint

onResponseError você pode adicionar localização atual e tag de contexto

import * as Sentry from '@sentry/vue';

Sentry.setContext('http-error', {
   endpoint: response?.url,
   tracingId: 123,
   status: response?.status,
});
Sentry.addBreadcrumb({
 type: 'http',
 category: 'xhr',
 message: ``,
 data: {
  url: response?.url,
  status_code: response?.status,
 },
 level: 'error',
});
Sentry.setTag('tracingId', '123');

substitua tracingId por qualquer registro de rastreamento personalizado que seu backend retorne