Как передать токен авторизации в каждом запросе?
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').