08.28 Vue+Spring 로그인

그 전에 만들었던 회원가입 페이지 드디어 정상적으로 돌아간다.
경로문제로 수많은 오류가 있었지만 경로를 제대로 잡으니 돌아간다.
오늘은 로그인 페이지를 만들 차례이다.

<script setup>
import { computed, reactive, ref } from "vue";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";

const router = useRouter();
const auth = useAuthStore();

const member = reactive({
  username: "",
  password: "",
});

const error = ref("");

const disableSubmit = computed(() => !(member.username && member.password));

const login = async () => {
  console.log(member);
  try {
    await auth.login(member);
    router.push("/");
  } catch (e) {
    // 로그인 에러
    console.log("에러=======", e);
    error.value = e.response.data;
  }
};
</script>

<template>
  <div class="mt-5 mx-auto" style="width: 500px">
    <h1 class="my-5">
      <i class="fa-solid fa-right-to-bracket"></i>
      로그인
    </h1>

    <form @submit.prevent="login">
      <div class="mb-3 mt-3">
        <label for="username" class="form-label">
          <i class="fa-solid fa-user"></i>
          사용자 ID:
        </label>
        <input
          type="text"
          class="form-control"
          placeholder="사용자 ID"
          v-model="member.username"
        />
      </div>

      <div class="mb-3">
        <label for="password" class="form-label">
          <i class="fa-solid fa-lock"></i>
          비밀번호:
        </label>
        <input
          type="password"
          class="form-control"
          placeholder="비밀번호"
          v-model="member.password"
        />
      </div>

      <div v-if="error" class="text-danger">{{ error }}</div>

      <button
        type="submit"
        class="btn btn-primary mt-4"
        :disabled="disableSubmit"
      >
        <i class="fa-solid fa-right-to-bracket"></i>
        로그인
      </button>
    </form>
  </div>
</template>

먼저 로그인페이지 뷰을 만들었다

AccountMenuGroup.vue도 수정해줬다.

어플리케이션 창에 user 밑에 roles도 나와야하는데 sql_db가 잘 연결 안되서 그런거 같다. 일단 로그아웃페이지 까지 만들고 추후 설정.

설정 후 잘 나온다!

LogoutMenuItem.vue까지 수정해줬다.

결과는 매우 잘 돌아갔다!