Как работает авторизация через заголовки?

Авторизация через HTTP заголовки

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

Основные типы авторизации через заголовки

Bearer Token (JWT)

Наиболее современный и популярный способ. Сервер выдает JWT токен, который клиент отправляет в каждом запросе.

// Получение токена после входа
async function login(email, password) {
  const response = await fetch('/api/v1/auth/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  });
  
  const data = await response.json();
  const token = data.access_token; // Сервер возвращает токен
  
  // Сохраняем токен (обычно в localStorage или sessionStorage)
  localStorage.setItem('auth_token', token);
  return token;
}

// Отправка авторизированного запроса
async function getProfile() {
  const token = localStorage.getItem('auth_token');
  
  const response = await fetch('/api/v1/users/me', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  });
  
  return response.json();
}

Структура заголовка Authorization

Стандартный формат заголовка Authorization:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Структура JWT токена (JWT состоит из трех частей, разделенных точками):

• Header - тип токена и алгоритм
• Payload - данные пользователя
• Signature - подпись для проверки целостности

// Расшифровка JWT (без проверки подписи - только для демо)
function decodeJWT(token) {
  const parts = token.split('.');
  const payload = JSON.parse(atob(parts[1]));
  return payload;
}

// Пример payload:
// {
//   "sub": "user_id_123",
//   "email": "user@example.com",
//   "iat": 1622000000,
//   "exp": 1622086400
// }

Обработка истечения токена

TTL (Time To Live) токена ограничен. Нужна стратегия обновления:

// Перехватчик для автоматического обновления токена
async function fetchWithAuth(url, options = {}) {
  let token = localStorage.getItem('auth_token');
  
  options.headers = {
    ...options.headers,
    'Authorization': `Bearer ${token}`
  };
  
  let response = await fetch(url, options);
  
  // Если токен истек (401 Unauthorized)
  if (response.status === 401) {
    const newToken = await refreshToken();
    localStorage.setItem('auth_token', newToken);
    
    // Повторяем запрос с новым токеном
    options.headers['Authorization'] = `Bearer ${newToken}`;
    response = await fetch(url, options);
  }
  
  return response;
}

async function refreshToken() {
  const refreshToken = localStorage.getItem('refresh_token');
  
  const response = await fetch('/api/v1/auth/refresh', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${refreshToken}`
    }
  });
  
  const data = await response.json();
  return data.access_token;
}

Другие типы авторизации через заголовки

Basic Authentication

Для простых случаев (редко используется в современных приложениях):

const username = 'user';
const password = 'pass';
const credentials = btoa(`${username}:${password}`);

const response = await fetch('/api/v1/data', {
  headers: {
    'Authorization': `Basic ${credentials}`
  }
});

API Key

Для публичных API или мобильных приложений:

const response = await fetch('/api/v1/data', {
  headers: {
    'X-API-Key': 'your-api-key-here'
  }
});

Безопасность

Где хранить токен?

1. localStorage - удобно, но уязвимо для XSS атак
2. sessionStorage - удаляется при закрытии браузера
3. Cookie (HttpOnly) - защищено от XSS, но возможна CSRF атака
4. Memory - теряется при перезагрузке

// Рекомендуемый подход с Cookie (HttpOnly)
// Сервер устанавливает cookie автоматически
fetch('/api/v1/users/me')
  .then(r => r.json());
// Cookie отправляется автоматически с credentials

HTTPS обязателен

Всегда используйте HTTPS для передачи токенов. HTTP позволяет перехватить токен в пути.

Работа с fetch в React

// Кастомный хук для авторизованных запросов
function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const token = localStorage.getItem('auth_token');
    
    fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'Authorization': `Bearer ${token}`
      }
    })
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);
  
  return { data, error, loading };
}

// Использование
function UserProfile() {
  const { data, loading, error } = useFetch('/api/v1/users/me');
  
  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;
  
  return <div>{data.name}</div>;
}

Итог

Авторизация через заголовки - это стандартный способ передачи учетных данных. Используйте Bearer токены (JWT) для максимальной безопасности и функциональности. Помните про обновление токенов, HTTPS и правильное их хранение. Всегда проверяйте токен на сервере перед доступом к защищенным ресурсам.