Как понимаешь процесс авторизации на фронтенде

Что проверяют

Понимаете ли вы, что фронтенд авторизацию не обеспечивает, а только отражает решения сервера, и знаете ли, где хранить учётные данные. Следом почти всегда спрашивают: localStorage или cookie и почему.

Как отвечать

Сначала разведите термины: аутентификация устанавливает, кто пользователь, авторизация решает, что ему можно. Настоящая проверка прав всегда на сервере, фронтенд лишь не показывает недоступное.

Дальше опишите поток:

• вход: форма отправляет логин и пароль, а при внешнем провайдере запускается OAuth 2.0 Authorization Code с PKCE. Implicit flow в актуальных рекомендациях по безопасности OAuth считается устаревшим;
• сессия на cookie: сервер ставит cookie с флагами HttpOnly, Secure, SameSite=Lax. JavaScript её не прочитает, значит, XSS её не украдёт. Взамен нужна защита от CSRF: SameSite плюс токен на изменяющих запросах;
• токены: access token держат в памяти приложения, refresh token в HttpOnly cookie. localStorage удобен, но любой внедрённый скрипт прочитает оттуда всё. Всё чаще выбирают схему BFF: токены живут на своём сервере, браузер видит только сессионную cookie;
• права в интерфейсе: после входа приложение запрашивает профиль с ролями и разрешениями, например /me, и по нему закрывает маршруты и скрывает кнопки;
• ошибки: на 401 одна попытка обновить токен и повтор запроса, при неудаче переход на страницу входа, на 403 сообщение «нет доступа», а не редирект на логин;
• выход: запрос к серверу на отзыв сессии, очистка состояния, синхронизация вкладок через BroadcastChannel.

Где спотыкаются

Считают скрытую кнопку защитой. Запрос можно отправить из DevTools или curl, поэтому права обязан проверять сервер.

Декодируют JWT на клиенте и доверяют роли из него. Для отображения это нормально, но подпись браузер не проверяет, и решать что-то всерьёз по этим данным нельзя.

Не продумывают параллельные запросы при истёкшем токене. Пять запросов разом получают 401 и запускают пять обновлений, а при ротации refresh token все, кроме первого, падают. Нужен один общий промис обновления, которого ждут остальные.