Данный проект представляет собой веб-приложение, разработанное с использованием следующих технологий: Vue 3, JWT, Firebase и Vite.
- Аутентификация с использованием Firebase: Пользователи могут регистрироваться и входить в систему с помощью своих учетных данных.
- Использование JWT для аутентификации: При успешной аутентификации пользователя генерируются JWT-токены, которые используются для аутентификации и авторизации запросов к API.
- Отображение списка автомобилей: Пользователи могут просматривать список доступных автомобилей.
- Защита маршрутов: Некоторые маршруты приложения защищены аутентификацией и доступны только авторизованным пользователям.
- src/
- api.js: Модуль для работы с API, включая запросы к Firebase.
- components/: Компонент
Loader.vueдля отображения индикатора загрузки. - router/: Конфигурация маршрутизатора Vue Router в
index.jsдля определения маршрутов и их защиты. - stores/: Хранилище в
auth.js(Pinia) для управления состоянием приложения, включая авторизацию пользователя. - views/: Компоненты-представления, включая представления для домашней страницы
HomeView.vue, регистрацииSignUp.vue, входаSignIn.vueи списка автомобилейCars.vue. - App.vue: Главный компонент приложения, который содержит макет приложения.
- main.js: Основной файл приложения, в котором происходит инициализация приложения Vue, Pinia, маршрутизатора и других зависимостей.
- Аутентификация: Для аутентификации пользователей используется Firebase Authentication. После успешной аутентификации генерируются JWT-токены, которые сохраняются в локальном хранилище браузера.
- Маршрутизация: Для управления навигацией в приложении используется Vue Router. Маршруты защищены с помощью механизма глобального навигационного хука
beforeEach, который проверяет наличие JWT-токена перед доступом к защищенным маршрутам. - Состояние приложения: Управление состоянием приложения осуществляется с помощью Pinia - стейт-менеджера для Vue 3. В хранилище
authхранится информация о текущем пользователе, включая JWT-токены.