Если вы использовали Nuxt, вы, вероятно, сталкивались с удобной компоновкой useFetch:

Это упрощает получение данных, но что, если у вас есть множество API, все из которых требуют аутентификации? Добавление заголовков к каждому вызову быстро становится утомительным.

Введите перехватчики.

Чтобы добавить глобальные перехватчики, мы создадим специальную компонуемую оболочку вокруг $fetch. Это особенно ценно, когда вашим вызовам API постоянно требуются заголовки авторизации.

В качестве основы давайте возьмем тот же проект из моего предыдущего поста в блоге об аутентификации в Nuxt 3.

начнем с создания нового составного объекта в составной папке 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;

Объяснение:

• useAuthFetch: наш собственный составной объект. Он принимает те же аргументы, что и useFetch.
• customFetch: создает индивидуальный экземпляр $fetch с перехватчиками.
• baseURL: используя параметр baseURL, ofetch добавляет его в начало для завершающих/начальных косых черт и запрашивает параметры поиска для baseURL, используя ufo:
• onRequest: этот перехватчик запускается перед каждым вызовом выборки. Он извлекает токен из файла cookie и добавляет заголовок авторизации, если токен присутствует.
• onResponse: запускается после успешной выборки с ведением журнала.
• onResponseError: обрабатывает ошибки выборки, записывает подробности и выдает ошибку с помощью showError (при условии, что вы это определили).
• return useFetch(...): Наконец, мы вызываем исходный useFetch, но передаем наш customFetch для обработки фактических запросов.

подробнее о перехватчиках можно узнать здесь

Теперь, когда вам понадобится получить данные из аутентифицированного API, просто используйте useAuthFetch вместо useFetch, и авторизация будет выполнена без проблем.

Когда вы проверяете сетевой вызов, вы можете видеть, что baseUrl правильный и заголовок авторизации присутствует

Ведение журнала

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

Как добавить Sentry в Nuxt: https://www.lichter.io/articles/nuxt3-sentry-recipe/

в перехватчике onRequest вы можете добавить навигационную цепочку к часовому

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

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

если ваш сервер возвращает идентификатор трассировки, вы также можете добавить тег и контекст с помощью часового, чтобы связать ошибки с конечной точкой

onResponseError вы можете добавить контекстную навигационную цепочку и тег

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');

замените tracingId любым пользовательским журналом трассировки, возвращаемым серверной частью