PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Как передать токен авторизации в каждом запросе?

DOM и браузер

Токен авторизации передают в каждом запросе через интерсептор HTTP-клиента (axios/fetch-обёртка), который автоматически добавляет заголовок `Authorization: Bearer <token>`.

Через интерсептор axios

Настроить один раз — токен добавляется автоматически ко всем запросам:

const api = axios.create({ baseURL: '/api' });

api.interceptors.request.use((config) => {
  const token = getAccessToken(); // из памяти/стора
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Теперь все запросы содержат токен
api.get('/users');

Обёртка над fetch

async function apiFetch(url, options = {}) {
  const token = getAccessToken();
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${token}`,
    },
  });
}

Обновление при истечении (интерсептор ответа)

api.interceptors.response.use(null, async (error) => {
  if (error.response?.status === 401) {
    const newToken = await refreshToken(); // обновить
    error.config.headers.Authorization = `Bearer ${newToken}`;
    return api.request(error.config); // повторить запрос
  }
  return Promise.reject(error);
});

Через cookie (альтернатива)

Если токен в HttpOnly cookie — браузер шлёт его автоматически (с credentials: 'include'), интерсептор не нужен:

fetch(url, { credentials: 'include' });

Главное

  • Централизованно — интерсептор, а не вручную в каждом запросе.
  • Токен из безопасного места (память/стор).
  • Обновление при 401.

Коротко для собеседования

Токен передают в каждом запросе через интерсептор axios (или обёртку fetch), который автоматически добавляет Authorization: Bearer <token> из памяти/стора — централизованно, а не вручную. Интерсептор ответа обновляет токен при 401 (refresh + повтор). Если токен в HttpOnly cookie — браузер шлёт его сам (credentials: 'include').

Другие вопросы раздела