Авторизация была в Frontend или Backend

Question

Авторизация была в Frontend или Backend

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

Авторизация должна быть реализована на Backend, так как он отвечает за проверку учетных данных, генерацию и валидацию токенов (JWT, сессий).

Frontend лишь отправляет данные (логин/пароль) на сервер, получает токен и сохраняет его (например, в localStorage или cookies), затем добавляет его в заголовки запросов (Authorization: Bearer <token>).

Пример отправки запроса с фронтенда:

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'user@example.com', password: '123' })
})
.then(res => res.json())
.then(data => {
  localStorage.setItem('token', data.token);
});

Важно: Хранение токенов на клиенте требует защиты от XSS и CSRF-атак.

Ответ 18+ 🔞

А, ну ты глянь, опять про авторизацию заговорили! Слушай сюда, разжуём эту тему, как последнюю жвачку.

Так, блядь, чтобы не было иллюзий: вся магия авторизации — это полная ответственность Backend'а, ёпта! Это он, этот задрот в серверной, должен ковыряться в базе, сверять логины-пароли, как будто это шифр от ядерной кнопки. Он же генерит эти ваши JWT-токены или сессии, которые потом проверяет при каждом чихе. Frontend тут — просто мальчик на побегушках, красивая картинка с кнопочками.

Фронтенд делает три вещи, проще пареной репы:

Выпрашивает данные: "Эй, пользователь, введи-ка свою почту и пароль, не стесняйся".
Тащит их на бэк: Отправляет эти данные, как записку, на специальный адрес (типа /api/login).
Прячет подачку: Если бэк не послал его нахуй, а выдал токен — фронт этот токен как зеницу ока хранит. Обычно суёт в localStorage или в куки.

Вот, смотри, как это выглядит в коде, если бы фронтендер не спал на лекциях:

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'user@example.com', password: '123' })
})
.then(res => res.json())
.then(data => {
  // Получили токен? Отлично, прячем!
  localStorage.setItem('token', data.token);
});

А дальше, при каждом запросе к защищённым данным, фронт достаёт этот токен из загашника и суёт его в заголовки, типа: "Смотри, бэк, я свой, вот моя пропускная грамота!" — Authorization: Bearer <token>.

Но вот тут, сука, внимание, самый сок! Хранить токен на клиенте — это как оставлять ключи от квартиры под ковриком. Удобно, но любой проходимец (XSS-атака) может их стырить. Или тебя могут обманом заставить самому отдать ключи (CSRF-атака). Так что тут без паранойи и правильных настроек безопасности — просто никуда, пиздец.

Короче, фронт — лицо, а бэк — мозги и замки на всех дверях. Запомни это, и не путай, а то получится ебаный стыд.