Как устроить процесс авторизации во frontend-приложении?

Авторизацию во фронтенд-приложении обычно строят на токенах (JWT): access token в памяти, refresh token в HttpOnly cookie, с обновлением и защитой роутов.

Типовой процесс

1. Логин

Пользователь отправляет логин/пароль → сервер проверяет и возвращает access token (короткий) и refresh token (длинный).

2. Хранение токенов

• Access token — в памяти (переменная/стор), не в localStorage (XSS).
• Refresh token — в HttpOnly cookie (недоступен из JS).

3. Запросы

Access token добавляется в заголовок:

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

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

При 401 (истёк access) — интерсептор шлёт refresh на /auth/refresh, получает новый access и повторяет запрос.

5. Защита маршрутов

Приватные роуты оборачивают в guard/ProtectedRoute — редирект на /login, если не авторизован.

6. Логаут

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

Нюансы

• Проверка прав — на сервере, клиентская защита только UX.
• Хранение токенов безопасно (память + HttpOnly cookie).

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

Авторизация на фронте: логин → access token (в памяти) + refresh token (HttpOnly cookie). Access добавляют в Authorization-заголовок через интерсептор; при 401 обновляют по refresh. Приватные роуты защищают guard-ом, логаут очищает токены. Настоящая проверка прав — на сервере.