0Pricing
Vue Academy · Урок

Аутентифицированные вызовы API с перехватчиками Axios

Перехватчик запроса для заголовка Authorization, перехватчик ответа для 401 → обновление → повторная попытка

«Аутентифицированные вызовы API с перехватчиками Axios» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Шаблон перехватчиков

Вместо того чтобы добавлять заголовки аутентификации и обрабатывать ответы 401 в каждом вызове, перехватчики Axios централизуют эту логику. Перехватчик запросов добавляет token, а перехватчик ответов прозрачно обрабатывает истечение срока действия и обновление.

Создание экземпляра Axios

Создайте отдельный экземпляр с базовым URL API и withCredentials, чтобы cookie httpOnly с token обновления отправлялся на маршрут обновления.

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  withCredentials: true // send cookies
})

export default api

Хранение token доступа в памяти

Храните token доступа в переменной модуля (или хранилище Pinia), а не в localStorage. Небольшая пара средств доступа позволяет перехватчикам читать и обновлять его.

let accessToken = null

export function setAccessToken(t) { accessToken = t }
export function getAccessToken() { return accessToken }

Перехватчик запросов: добавление заголовка

Перехватчик запросов запускается перед каждым запросом и добавляет Authorization: Bearer <token>, если token существует.

api.interceptors.request.use((config) => {
  const token = getAccessToken()
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
})

Перехватчик ответов: обработка 401

Перехватчик ответов пропускает успешные ответы без изменений, но при получении 401 запускает процедуру обновления.

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const original = error.config
    if (error.response?.status === 401 && !original._retried) {
      // ... refresh and retry (next scenes)
    }
    return Promise.reject(error)
  }
)

Предотвращение бесконечных циклов повторных попыток

Пометьте неудачный запрос флагом вроде _retried, чтобы повторить его только один раз. Если сама процедура обновления возвращает 401, запрос отклоняется вместо бесконечного зацикливания.

if (error.response?.status === 401 && !original._retried) {
  original._retried = true
  // attempt refresh exactly once for this request
}

Вызов маршрута обновления

При ответе 401 отправьте запрос POST на /auth/refresh. Браузер автоматически отправит cookie обновления с флагом httpOnly, а сервер ответит новым token доступа.

const { data } = await api.post('/auth/refresh')
setAccessToken(data.accessToken)

Повторная отправка исходного запроса

После обновления измените заголовок в конфигурации original и повторно отправьте запрос. Пользователь не заметит прерывания.

original.headers.Authorization = 'Bearer ' + data.accessToken
return api(original) // retry the original request

Обработка одновременных ответов 401

Если одновременно завершается ошибкой много запросов, не следует запускать N параллельных вызовов обновления. Используйте один общий промис обновления; запросы в очереди дождутся его завершения, а затем повторятся с новым token.

let refreshing = null

function refreshOnce() {
  if (!refreshing) {
    refreshing = api.post('/auth/refresh')
      .finally(() => { refreshing = null })
  }
  return refreshing
}

Прекращение работы: принудительный выход

Если обновление завершается ошибкой (просрочен или недействителен token обновления), удалите token из памяти и перенаправьте пользователя на страницу входа. Это единственное место, где для всего приложения обрабатывается истечение сеанса.

try {
  await refreshOnce()
} catch {
  setAccessToken(null)
  router.push('/login')
  return Promise.reject(error)
}

Использование экземпляра в компонентах

Компонентам достаточно импортировать настроенный экземпляр api и выполнять вызовы. Заголовки аутентификации, обновление и повторная отправка полностью прозрачны для кода компонентов.

<script setup>
import api from '@/lib/api'
import { ref, onMounted } from 'vue'

const profile = ref(null)
onMounted(async () => {
  const { data } = await api.get('/me')
  profile.value = data
})
</script>

Быстрая проверка

Проверьте, насколько хорошо Вы поняли перехватчики Axios.

Итоги

Вы научились выполнять аутентифицированные вызовы с помощью перехватчиков:

  • Перехватчик запросов добавляет Authorization: Bearer из token, хранящегося в памяти
  • Перехватчик ответов перехватывает 401 и выполняет обновление
  • Флаг _retried повторяет исходный запрос ровно один раз
  • POST /auth/refresh использует cookie httpOnly для получения нового token
  • Используйте одно общее обещание обновления для одновременных ответов 401; при ошибке выполняйте принудительный выход

Часто задаваемые вопросы

Урок «Аутентифицированные вызовы API с перехватчиками Axios» бесплатный?

Да — полный текст урока «Аутентифицированные вызовы API с перехватчиками Axios» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Аутентифицированные вызовы API с перехватчиками Axios»?

Перехватчик запроса для заголовка Authorization, перехватчик ответа для 401 → обновление → повторная попытка Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Аутентифицированные вызовы API с перехватчиками Axios»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Бэкенд Fastify для SPA на Vue
  2. Аутентификация JWT: вход и обновление
  3. Аутентифицированные вызовы API с перехватчиками Axios
  4. Развёртывание полнофункционального Vue-приложения в продакшене
← Назад к Vue Academy