Перейти к основному содержимому

[Lv1] Как была реализована аутентификация в прошлых проектах?

Цель: Чётко объяснить за 3–5 минут, «как фронтенд обрабатывает вход, управление состоянием и защиту страниц», чтобы легко вспомнить на собеседовании.

1. Ключевые тезисы для ответа на собеседовании​

  1. Три этапа процесса входа: Отправка формы → Верификация на сервере → Сохранение токена и перенаправление.
  2. Управление состоянием и токеном: Pinia с персистентностью, Axios Interceptor для автоматического прикрепления Bearer Token.
  3. Обработка после входа и защита: Инициализация общих данных, route guard'ы, выход из системы и крайние случаи (OTP, принудительная смена пароля).

Начните с этих трёх ключевых тезисов, затем расширяйте по мере необходимости, показывая интервьюеру, что у вас есть целостное понимание.

2. Компоненты системы и их ответственность​

МодульРасположениеРоль
authStoresrc/stores/authStore.tsХранит состояние входа, персистирует токен, предоставляет getter'ы
useAuth Hooksrc/common/hooks/useAuth.tsИнкапсулирует процесс входа/выхода, единый формат возврата
Login APIsrc/api/login.tsВызывает серверный POST /login, POST /logout
Axios Utilitysrc/common/utils/request.tsRequest/Response Interceptor, единая обработка ошибок
Route Guardsrc/router/index.tsПроверяет meta для определения необходимости входа
Инициализацияsrc/common/composables/useInit.tsПроверяет наличие токена при запуске приложения, загружает необходимые данные

Мнемоника: «Store управляет состоянием, Hook управляет потоком, Interceptor управляет каналом, Guard управляет страницами.»

3. Процесс входа (пошагово)​

Шаг 0. Форма и предварительная валидация​

  • Поддерживает два метода входа: пароль и SMS-код подтверждения.
  • Базовая валидация перед отправкой (обязательные поля, формат, debounce).

Шаг 1. Вызов Login API​

const { status, data, code } = await useApi(login, payload);
  • useApi единообразно обрабатывает ошибки и состояние загрузки.
  • При успехе data возвращает токен и основную информацию о пользователе.

Шаг 2. Обработка ответа сервера​

СценарийПоведение
Требуется дополнительная верификация (например, подтверждение личности при первом входе)Установить authStore.onBoarding в true, перенаправить на страницу верификации
Принудительная смена пароляПеренаправить в процесс смены пароля с необходимыми параметрами
Обычный успехВызвать authStore.$patch() для сохранения токена и информации о пользователе

Шаг 3. Общие действия после входа​

  1. Получить профиль пользователя и список кошельков.
  2. Инициализировать персонализированный контент (например, список подарков, уведомления).
  3. Перенаправить на внутреннюю страницу на основе redirect или предопределённого маршрута.

Успешный вход — это лишь полдела — общие данные должны быть загружены на этом этапе, чтобы каждая страница не выполняла отдельные API-вызовы.

4. Управление жизненным циклом токена​

4.1 Стратегия хранения​

  • authStore включает persist: true, записывая ключевые поля в localStorage.
  • Плюсы: Состояние автоматически восстанавливается после перезагрузки страницы. Минусы: Необходимо учитывать XSS и безопасность.

4.2 Axios Request Interceptor​

if (needToken) {
  const { access_token } = auth.value;
  config.headers.Authorization = `Bearer ${access_token}`;
}
  • API, требующие авторизации, автоматически включают Bearer Token.
  • API, явно помеченные needToken: false (вход, регистрация и т.д.), пропускают прикрепление токена.

4.3 Обработка истечения и исключений​

  • Если сервер возвращает ответ о просроченном или недействительном токене, Response Interceptor единообразно преобразует его в уведомление об ошибке и запускает процесс выхода.
  • Механизм Refresh Token может быть добавлен как расширение, но текущий проект использует упрощённую стратегию.

5. Защита маршрутов и инициализация​

5.1 Route Guard​

router.beforeEach((to, from, next) => {
  const { needAuth, goRouteIfNoToken } = to.meta;
  if (needAuth && !authStore.isLogin) {
    return next({ name: goRouteIfNoToken || 'Login' });
  }
  next();
});
  • Использует meta.needAuth для определения необходимости проверки статуса входа.
  • Перенаправляет на страницу входа или указанную публичную страницу, если пользователь не авторизован.

5.2 Инициализация при запуске приложения​

useInit выполняет следующее при запуске приложения:

  1. Проверяет, содержит ли URL login_token или platform_token — если да, выполняет автоматический вход или устанавливает токен.
  2. Если в Store уже есть токен, загружает информацию о пользователе и общие данные.
  3. Если токена нет, остаётся на публичной странице и ждёт ручного входа пользователя.

6. Процесс выхода (очистка)​

  1. Вызвать POST /logout для уведомления сервера.
  2. Выполнить reset():
    • authStore.$reset() очищает информацию о входе.
    • Связанные store (информация о пользователе, избранное, коды приглашений и т.д.) также сбрасываются.
  3. Очистить кеши на стороне браузера (например, кеши localStorage).
  4. Перенаправить на страницу входа или главную страницу.

Выход — это зеркальное отражение входа: дело не только в удалении токена — необходимо убедиться, что всё зависимое состояние очищено, чтобы избежать утечки данных.

7. Частые вопросы и лучшие практики​

  • Декомпозиция потока: Разделяйте вход и инициализацию после входа, чтобы hook'и оставались лаконичными.
  • Обработка ошибок: Единообразно через useApi и Response Interceptor для обеспечения согласованного поведения UI.
  • Безопасность:
    • Всегда используйте HTTPS.
    • При хранении токенов в localStorage будьте осторожны с XSS для чувствительных операций.
    • Рассмотрите расширение с помощью httpOnly Cookies или Refresh Token при необходимости.
  • Расширяемость: Крайние случаи, такие как OTP и принудительная смена пароля, обрабатываются гибко — hook возвращает статус для обработки на уровне представления.

8. Мнемоники для быстрого ответа на собеседовании​

  1. «Ввод → Валидация → Сохранение → Перенаправление»: Используйте этот порядок для описания общего потока.
  2. «Store управляет состоянием, Interceptor управляет заголовками, Guard блокирует неавторизованный доступ»: Подчеркните архитектурное разделение.
  3. «Загружайте общие данные сразу после входа»: Демонстрирует чувствительность к пользовательскому опыту.
  4. «Выход — это сброс одним нажатием + перенаправление на безопасную страницу»: Покрывает безопасность и завершённость потока.