Заготовка HTML формы для работы с аутентификацией в Nuxt

Страница входа для аутентификации Nuxt

Для того чтобы начать взаимодействовать с библиотекой аутентификации, нам потребуется, конечно, страница входа на сайт, где будет форма входа. В этой форме мы сможем ввести логин и пароль пользователя, под которым хотим войти. Этот пользователь будет аутентифицироваться через pages/login.vue, где и будет находиться форма входа.

Описание формы

Давайте разберёмся, что здесь у нас есть. В первую очередь, у нас есть форма.

<template>
  <div class="login">
   <a-form class="login-form" @submit.prevent="login">
    <a-form-item>
     <a-input
      v-model:value="username"
      placeholder="Имя пользователя"
      autocomplete="off"
     />
    </a-form-item>
    <a-form-item>
     <a-input-password
      v-model:value="password"
      placeholder="Пароль"
      autocomplete="off"
     />
    </a-form-item>
    <a-form-item>
     <a-button type="primary" html-type="submit" class="login-form-button">
      Войти
     </a-button>
    </a-form-item>
   </a-form>
  </div>
</template>

<style lang="scss" scoped>
.login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
.login-form-button {
  width: 100%;
}
</style>

Для её создания используется библиотека ant-design-vue, но по сути это обычная HTML-форма, которая отображается на странице. Вы можете использовать любую другую библиотеку для формирования формы или вообще написать её на чистом HTML. В данном случае это не имеет большого значения.

Итак, у нас есть форма с двумя текстовыми полями: это логин (username) и пароль (password), которые пользователь вводит. Также имеется кнопка отправки, которая передаёт данные на сервер. Здесь применяются небольшие CSS-стили для оформления этой формы.

Взаимодействие с сервером

<script setup>
import { ref } from "vue";

const username = ref("");
const password = ref("");

definePageMeta({
  layout: false
});

async function login() {
  const response = await useFetch("/api/auth/login", {
    method: "POST",
    body: {
      username: username.value,
      password: password.value
    }
  });

  console.log(response);
}
</script>

У нас есть две переменные: username и password, которые связаны с текстовыми полями. Также отключён макет, чтобы не подгружать ничего лишнего для этой формы. Единственный метод, который используется, — это метод login, который позволит пользователю взаимодействовать с сервером и получать ответ.

Все, что мы делаем, — это отправляем на сервер введённые логин и пароль, а затем обрабатываем ответ, который вернётся от сервера.

Итог

Данная форма является заготовкой для работы с системой аутентификации. Она выглядит просто, но обеспечивает базовую функциональность, необходимую для входа на сайт и дальнейшей обработки данных пользователя.