Что такое JWT и как его использовать в React?react-92

JWT — это стандарт (RFC 7519) для создания токенов доступа, которые позволяют безопасно передавать информацию между клиентом и сервером в виде JSON-объекта.

Структура JWT

  1. Header (Заголовок): Содержит тип токена и алгоритм шифрования 
    {
  "alg": "HS256",
  "typ": "JWT"
}
  2. Payload (Полезная нагрузка): Содержит claims (утверждения) - данные о пользователе и метаинформацию 
    {
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}
  3. Signature (Подпись): Создается путем кодирования header и payload с секретным ключом

Как использовать JWT в React

1. Получение токена при аутентификации

После успешного входа, сервер возвращает JWT, который нужно сохранить:

async function login(username, password) {
  const response = await fetch('/api/auth', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  });
  const data = await response.json();

  // Сохраняем токен в localStorage или httpOnly куки
  localStorage.setItem('token', data.token);
}

2. Добавление токена в запросы

При каждом запросе к защищенным endpoint'ам:

async function fetchProtectedData() {
  const token = localStorage.getItem('token');

  const response = await fetch('/api/protected', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });

  if (!response.ok) {
    // Обработка ошибки (например, токен истек)
    throw new Error('Request failed');
  }

  return response.json();
}

3. Хранение токена

  • localStorage/sessionStorage: Просто, но уязвимо к XSS-атакам
  • HttpOnly куки: Более безопасно, но требует настройки CORS
  • In-memory: Самый безопасный (исчезает при закрытии вкладки)

4. Проверка срока действия токена

JWT часто содержит срок действия (exp - expiration time):

function isTokenExpired(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 < Date.now();
}

5. Обновление токена

Для продления сессии без повторного входа:

async function refreshToken() {
  const refreshToken = localStorage.getItem('refreshToken');
  const response = await fetch('/api/refresh', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${refreshToken}` }
  });

  const data = await response.json();
  localStorage.setItem('token', data.newToken);
}

Лучшие практики безопасности

  1. Всегда используйте HTTPS
  2. Устанавливайте разумное время жизни токена
  3. Для критически важных операций требуйте повторную аутентификацию
  4. Реализуйте механизм отзыва токенов (blacklist)
  5. Не храните чувствительные данные в payload JWT

Популярные библиотеки для работы с JWT

  • jsonwebtoken (для сервера)
  • jwt-decode (для клиента)

Пример использования jwt-decode:

import jwt_decode from 'jwt-decode';

const token = 'eyJhbGci...';
const decoded = jwt_decode(token);
console.log(decoded.name); // John Doe

Резюмируем

JWT — удобный стандарт для аутентификации в React-приложениях. Важно правильно реализовать хранение, передачу и обновление токенов, соблюдая меры безопасности. Для production-приложений рекомендуется использовать httpOnly куки + CSRF-токены для максимальной защиты.

Вопросы

Собеседования