Как была устроена Аутентификация в Frontend приложении?

Аутентификация во фронтенде обычно устроена на токенах: логин → сервер выдаёт access и refresh токены → access в памяти, refresh в HttpOnly cookie → запросы с токеном → обновление при истечении → защита маршрутов.

Типичная схема

1. Логин

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

2. Хранение

• Access — в памяти (стор/переменная).
• Refresh — в HttpOnly cookie (защита от XSS).

3. Запросы

Access добавляется в заголовок через интерсептор:

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

4. Обновление

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

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

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

6. Восстановление сессии

При старте приложения — тихий refresh, чтобы восстановить access из HttpOnly cookie.

7. Логаут

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

Нюансы

Проверка прав — на сервере; клиентская защита — только UX.

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

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