Как на фронтенде реализуется авторизация? (Хранение access/refresh токенов в Cookies / LocalStorage, отправка токена в запросах, обновление токена)

Question

Access token хранится в памяти или LocalStorage для доступа к API. Refresh token хранится в HttpOnly cookie для безопасного обновления. Токен автоматически добавляется в заголовки запросов и обновляется при истечении.

YeaHub · Accepted Answer

Схема работы:Пользователь вводит credentialsСервер возвращает access и refresh tokensAccess token хранится в клиентеRefresh token хранится в HttpOnly cookieПри истечении access token автоматически обновляетсяБезопасное хранение:Access token: localStorage или memoryRefresh token: HttpOnly cookieЗащита от CSRF и XSS атакАвтоматическое обновление:// Интерцептор для axios
axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      const newToken = await refreshToken();
      // Повтор запроса с новым токеном
    }
    return Promise.reject(error);
  }
);Best practices:Короткое время жизни access tokenSecure и HttpOnly флаги для cookiesВалидация токенов на сервереЗащита от replay attacks