Лабораторная «Задание Реализуйте страницу авторизации и регистрации для...»,
Веб-программирование и дизайн в Красноярске

Задание Реализуйте страницу авторизации и регистрации для SPA-приложения. Ход работы: 1. Настройка окружения Использовать ранее созданное SPA-приложение или создать новое. Подключить React Router для управления страницами: sh npm install react-router-dom Убедиться, что backend-приложение (если используется) работает и обрабатывает запросы 2. Создание базы данных и таблицы пользователей В базе данных (PostgreSQL) создать таблицу users со следующими полями: sql CREATE TABLE users ( id SERIAL PRIMARY KEY, username VARCHAR(50) UNIQUE NOT NULL, email VARCHAR(100) UNIQUE NOT NULL, password_hash TEXT NOT NULL ); Для хранения паролей использовать bcrypt. 3. Создание API для аутентификации (backend) Реализовать эндпоинт регистрации (POST /register), который: Получает данные пользователя (логин, email, пароль). Хеширует пароль перед сохранением. Записывает пользователя в базу данных. Реализовать эндпоинт входа в систему (POST /login), который: Проверяет наличие пользователя в базе. Сравнивает хеш пароля. В случае успеха возвращает JWT-токен. В случае ошибки – отправляет соответствующий ответ. Для генерации JWT-токена использовать jsonwebtoken (например, jsonwebtoken в Node.js). 4. Реализация страницы авторизации (frontend) Создать компонент Login.js в components/. Добавить форму с полями email и password. Использовать useState для управления вводом данных. Реализовать обработчик onSubmit, который отправляет запрос: js fetch('http://localhost:5000/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) }) .then(res => res.json()) .then(data => { if (data.token) { localStorage.setItem('token', data.token); setIsAuthenticated(true); } }); При успешном входе сохранять JWT-токен в localStorage и обновлять состояние авторизации. В случае ошибки – выводить сообщение пользователю. 5. Реализация защиты маршрутов (PrivateRoute.js) Создать компонент PrivateRoute, который проверяет наличие токена перед рендерингом страниц. Использовать useNavigate из react-router-dom для редиректа неавторизованных пользователей. js import { Navigate } from 'react-router-dom'; const PrivateRoute = ({ children }) => { const token = localStorage.getItem('token'); return token ? children : <Navigate to="/login" />; }; 6. Реализация выхода из системы Добавить кнопку "Выйти", которая удаляет токен и сбрасывает состояние авторизации. js const handleLogout = () => { localStorage.removeItem('token'); setIsAuthenticated(false); }; Критерии оценки Должна быть регистрация и авторизация Форма авторизации корректно обновляет состояние Пароли хранятся в базе в зашифрованном виде Реализовано API для аутентификации и авторизации Используется JWT для защиты маршрутов Реализован выход из системы и очистка токена