Где будешь хранить данные полученные о пользователе после логина?

Хранение данных пользователя после логина

Основные хранилища

После успешного логина данные пользователя можно хранить в нескольких местах, каждое с собственными преимуществами и ограничениями.

1. localStorage

Описание: Синхронное хранилище браузера, сохраняющее данные на диске. Данные остаются даже после закрытия браузера.

Плюсы:

• Простая API: setItem(), getItem(), removeItem()
• Большой объём (обычно 5-10 МБ)
• Доступен в любой момент жизни приложения

Минусы:

• Уязвим к XSS-атакам (если на странице выполнится вредоносный скрипт, он сможет прочитать данные)
• Синхронность может замедлить приложение при большом объёме данных
• Нет автоматического истечения (TTL)

Пример:

// Сохранение
localStorage.setItem('user', JSON.stringify(userData));

// Получение
const user = JSON.parse(localStorage.getItem('user'));

// Удаление
localStorage.removeItem('user');

2. sessionStorage

Описание: Похож на localStorage, но данные удаляются при закрытии вкладки браузера.

Плюсы:

• Автоматическое удаление при закрытии сессии
• Безопаснее для чувствительных данных
• Изолирован от других вкладок

Минусы:

• Теряется при обновлении страницы (если сессия истекла)
• Все те же проблемы безопасности как у localStorage
• Меньший объём данных

Пример:

sessionStorage.setItem('sessionToken', token);
const token = sessionStorage.getItem('sessionToken');

3. HTTP-only cookies

Описание: Файлы cookies, которые хранят данные на диске и отправляются с каждым HTTP-запросом. HTTP-only флаг делает их недоступными для JavaScript, защищая от XSS.

Плюсы:

• Автоматически отправляются с запросами (для аутентификации)
• HTTP-only флаг защищает от XSS-атак
• Поддерживают Secure флаг (только HTTPS)
• Поддерживают SameSite (защита от CSRF)
• Можно установить время истечения (Expires, Max-Age)

Минусы:

• Не доступны для JavaScript (если установлен флаг HTTP-only)
• Уязвимы к CSRF-атакам (требуют дополнительной защиты)
• Нельзя отправлять cross-origin (требуют Credentials: 'include')

Пример установки на сервере:

response.setHeader('Set-Cookie', 
  'authToken=abc123; HttpOnly; Secure; SameSite=Strict; Max-Age=3600');

4. Memory (React Context / State)

Описание: Хранение данных в памяти приложения (Redux, Context API, Zustand).

Плюсы:

• Очень быстро
• Безопасно (данные не попадают на диск)
• Реактивность: при изменении данные обновляют UI
• Можно применить шифрование

Минусы:

• Теряются при перезагрузке страницы
• Требует гидрации из безопасного источника (HTTP-only cookie)
• Доступны для JavaScript (но защищены от XSS на уровне приложения)

Пример с Context:

import { createContext, useState } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);

  return (
    <AuthContext.Provider value={{ user, setUser, token, setToken }}>
      {children}
    </AuthContext.Provider>
  );
}

Рекомендуемый подход

Оптимальная стратегия для фронтенда:

1. Токены (JWT, refresh token) -> HTTP-only cookies

   • Сервер устанавливает Set-Cookie с флагом HttpOnly
   • Браузер автоматически отправляет их с запросами
   • Защищено от XSS

2. Данные пользователя (профиль) -> Memory (Context/Redux) + localStorage как fallback

   • Загружаем данные при инициализации из API
   • Храним в state для быстрого доступа и реактивности
   • localStorage используем только для кэша на случай перезагрузки

3. Чувствительные данные -> только Memory

   • Пароли, приватные ключи — никогда не в localStorage

Пример интеграции:

function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Проверяем HTTP-only cookie, загружаем профиль
    fetch('/api/v1/me', { credentials: 'include' })
      .then(res => res.json())
      .then(data => {
        setUser(data);
        localStorage.setItem('user_cache', JSON.stringify(data));
      })
      .finally(() => setLoading(false));
  }, []);

  const logout = async () => {
    await fetch('/api/v1/logout', { method: 'POST', credentials: 'include' });
    setUser(null);
    localStorage.removeItem('user_cache');
  };

  return { user, loading, logout };
}

Заключение

Для современного фронтенда лучший выбор:

• Токены -> HTTP-only cookies (безопасно)
• Профиль -> Memory + localStorage кэш (быстро и удобно)
• Сессия -> Управляется сервером через refresh tokens

Этот подход обеспечивает баланс между безопасностью, производительностью и удобством.