Авторизация

Backend

Для авторизации, аналогично регистрации, необходимо отправить следующий запрос на эндпоинт /auth/jwt/create/:

{
    "username": "<username>",
    "password": "<password>"
}

В качестве ответа мы всё так же получаем refresh- и access-токены, которые сохраняются локально.

Frontend

Логика фронтенда реализована аналогично разделу регистрации.

Скрипт:

1. Импорты:
2. ref из Vue.js для создания реактивных переменных.

3. useAuthStore для взаимодействия с состоянием аутентификации.

4. Переменные:

5. username и password для хранения данных входа.

6. valid для контроля состояния валидации формы.

7. Правила Валидации:

8. usernameRules и passwordRules для проверки корректности введенных данных.

9. Функция submit:

10. Обрабатывает процесс входа и отображает ошибки при неудаче.

Разметка:

• Разметка использует Vuetify компоненты для построения формы входа.
• Включает поля для ввода имени пользователя и пароля.
• Кнопки для входа и перехода к регистрации.

Логика Работы:

1. Ввод данных: Пользователь вводит имя пользователя и пароль.
2. Валидация: Автоматическая проверка введенных данных.
3. Отправка данных: При нажатии на кнопку "Login", происходит попытка входа.
4. Обработка ошибок: В случае ошибки, пользователю отображается соответствующее уведомление.

Стилизация:

Страница стилизована с помощью Vuetify и локальных стилей (раздел <style scoped>).

Пример работы

Если прощёлкать поля:

Пример ввода неверных реквизитов: