Как устроена авторизация в SPA через токены (например JWT)?

Авторизация в одностраничных приложениях (SPA) через токены, такие как JSON Web Token (JWT), представляет собой современный, бесстатусный подход, который устраняет необходимость хранения сессий на сервере. Это делает приложение более масштабируемым и упрощает интеграцию с микросервисной архитектурой.

Как работает процесс

Процесс начинается, когда пользователь вводит свои учётные данные (например, логин и пароль) в форму входа. SPA отправляет эти данные на сервер аутентификации (обычно через HTTPS POST-запрос).

• Сервер проверяет учётные данные (например, сверяя хэш пароля с сохранённым в базе данных).
• Если проверка успешна, сервер создаёт JWT. JWT состоит из трёх частей, закодированных в Base64: заголовка (header), полезной нагрузки (payload) и подписи (signature).
• Полезная нагрузка содержит утверждения (claims) о пользователе, такие как его идентификатор (sub), срок действия токена (exp) и другие данные (например, роли).
• Сервер подписывает токен с помощью секретного ключа или пары ключей (RSA), создавая цифровую подпись, которая гарантирует целостность токена.
• Сгенерированный JWT отправляется обратно клиенту, обычно в теле ответа.

Хранение и использование токена на клиенте

Полученный токен (часто называемый access token) должен быть сохранён на стороне клиента для последующего использования. Существует два основных подхода:

1. localStorage или sessionStorage: Просто, но уязвимо для XSS-атак, если злоумышленник сможет внедрить и выполнить вредоносный JavaScript на странице.
2. HttpOnly Cookie: Более безопасно, так как cookie недоступна для JavaScript, что защищает от XSS, но требует настройки CORS и защиты от CSRF-атак.

После сохранения, SPA должен прикладывать этот токен к каждому запросу к защищённому API. Обычно это делается через заголовок HTTP Authorization с префиксом Bearer.

// Пример отправки запроса с токеном в JavaScript (fetch API)
const token = localStorage.getItem('accessToken');
fetch('https://api.example.com/protected-data', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));

Верификация токена на сервере

Когда защищённый эндпоинт сервера получает запрос с токеном, он должен:

1. Извлечь токен из заголовка Authorization.
2. Проверить его структуру и подпись, используя тот же секретный ключ или публичный ключ (в случае асимметричного шифрования).
3. Убедиться, что токен не истёк (проверив claim exp).
4. Извлечь данные пользователя из полезной нагрузки (payload) токена. Поскольку токен подписан, сервер может доверять этой информации без необходимости обращаться к базе данных для проверки сессии, что и является ключевым преимуществом.

// Пример проверки JWT на сервере (Node.js с библиотекой jsonwebtoken)
const jwt = require('jsonwebtoken');
const secretKey = process.env.JWT_SECRET;

function verifyToken(req, res, next) {
  const authHeader = req.headers.authorization;
  if (!authHeader) return res.sendStatus(401);

  const token = authHeader.split(' ')[1]; // Извлекаем часть после 'Bearer'
  jwt.verify(token, secretKey, (err, decoded) => {
    if (err) return res.sendStatus(403); // Неверный или истёкший токен
    req.user = decoded; // Добавляем данные пользователя в объект запроса
    next(); // Передаём управление следующему middleware/обработчику
  });
}

Обновление токенов и Refresh Token

Access token обычно имеют короткий срок жизни (минуты или часы) для минимизации рисков в случае утечки. Для получения нового access token без повторного ввода пароля используется refresh token. Это отдельный, долгоживущий токен, который хранится более безопасно (например, в HttpOnly cookie) и отправляется на специальный эндпоинт сервера для получения новой пары токенов.

Итог: Авторизация через JWT в SPA — это эффективный бесстатусный механизм, идеально подходящий для масштабируемых RESTful API и микросервисов. Его стоит применять, когда нужно избежать хранения состояния сессии на сервере и обеспечить простую интеграцию между различными сервисами. Однако важно правильно реализовать безопасное хранение токенов на клиенте, использовать HTTPS и короткие сроки жизни access token в сочетании с refresh token для баланса между удобством пользователя и безопасностью.