PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Как реализовать JWT авторизацию?

DOM и браузер

JWT-авторизацию реализуют так: сервер при логине выдаёт подписанный access token (и refresh), клиент шлёт access в заголовке `Authorization`, сервер проверяет подпись.

Процесс реализации

1. Логин — выдача токенов

Сервер проверяет учётные данные и подписывает JWT:

// сервер
const accessToken = jwt.sign({ sub: user.id, role: user.role }, SECRET, { expiresIn: '15m' });
const refreshToken = jwt.sign({ sub: user.id }, REFRESH_SECRET, { expiresIn: '7d' });

Refresh отдают в HttpOnly cookie, access — в теле ответа.

2. Хранение на клиенте

  • Access → в памяти.
  • Refresh → HttpOnly cookie.

3. Запросы с токеном

axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${accessToken}`;
  return config;
});

4. Проверка на сервере

Middleware проверяет подпись и срок; при валидности — доверяет claims без запроса в БД (stateless):

const payload = jwt.verify(token, SECRET); // бросит при невалидности/истечении
req.user = payload;

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

При 401 клиент шлёт refresh на /auth/refresh → новый access (часто с ротацией refresh).

6. Логаут

Отозвать refresh на сервере, очистить cookie и access из памяти.

Нюансы

  • Секреты в payload не класть (он читаем).
  • Короткий access + refresh; отзыв — через короткий TTL/чёрный список.

Коротко для собеседования

JWT-авторизация: логин → сервер подписывает access (короткий) и refresh (длинный, в HttpOnly cookie). Клиент шлёт access в Authorization: Bearer, сервер проверяет подпись без хранения сессии. При 401 — обновление по refresh. Секреты в payload не кладут (он читаем).

Подробнее: JWT — введение

Другие вопросы раздела