React-приложение на Vite для работы с API новостей: список новостей, страница новости с комментариями, авторизация и ролевая модель (гость, пользователь, верифицированный автор, администратор).
Приложение будет доступно по адресу: http://localhost:5173
VITE_API_URL=http://localhost:8000/api| Маршрут | Описание |
|---|---|
/ |
Главная — список новостей (заголовок, дата, автор, при наличии — обложка). Клик по карточке открывает страницу новости. |
/news/:id |
Страница одной новости: заголовок, дата, автор, контент, список комментариев. Форма добавления комментария (для авторизованных). Кнопки «Редактировать» / «Удалить» у новости и у комментариев в зависимости от прав. |
/login |
Страница входа: поля email/логин и пароль. После успешного запроса токен сохраняется в localStorage, в запросы к API добавляется заголовок Authorization: Bearer <token>. |
/news/create |
Создание новости (доступно верифицированным авторам и администраторам). Форма: заголовок, контент. |
После входа в шапке отображаются имя пользователя (или «Админ»), кнопка «Выйти» и при наличии прав — ссылка «Создать новость».
Все запросы выполняются через axios (обёртка в src/api/client.js добавляет заголовок Authorization при наличии токена).
| Метод | URL | Описание |
|---|---|---|
POST |
/api/auth/login |
Вход. Тело: { "email": "...", "password": "..." }. Ожидается ответ с access_token и объектом user (например id, email, role, is_verified_author). |
| Метод | URL | Описание |
|---|---|---|
GET |
/api/news |
Список новостей. |
GET |
/api/news/:id |
Одна новость (при необходимости с полем comments). |
POST |
/api/news |
Создание новости. Тело: { "title": "...", "content": "..." }. Требуется авторизация (верифицированный автор / админ). |
PUT |
/api/news/:id |
Обновление новости. Тело: { "title": "...", "content": "..." }. Автор или админ. |
DELETE |
/api/news/:id |
Удаление новости. Автор или админ. |
| Метод | URL | Описание |
|---|---|---|
GET |
/api/news/:id/comments |
Список комментариев к новости (если не приходят в теле GET /api/news/:id). |
POST |
/api/news/:id/comments |
Добавить комментарий. Тело: { "text": "..." }. Требуется авторизация. |
PUT |
/api/comments/:id |
Редактирование комментария. Тело: { "text": "..." }. Автор комментария или админ. |
DELETE |
/api/comments/:id |
Удаление комментария. Автор комментария или админ. |
- Неавторизованный пользователь: просмотр списка новостей и страницы новости, комментариев. Нет кнопок создания новости, добавления/редактирования/удаления комментариев и новостей.
- Авторизованный пользователь (без верификации как автор): может оставлять комментарии; кнопка «Создать новость» не показывается.
- Верифицированный автор (
user.is_verified_author === true): доступна кнопка «Создать новость» и страница/news/create; может редактировать и удалять свои новости, свои комментарии. - Администратор (
user.role === 'admin'): те же возможности плюс редактирование и удаление любых новостей и комментариев.
Проверки прав выполняются по данным, возвращаемым API при логине (или с эндпоинта текущего пользователя), и по полям author_id / author.id у новости и комментария.
Стили вынесены в файлы .module.css рядом с компонентами.