로그인 Component 생성

이전 포스팅에서 회원가입 페이지를 구성하였다.

회원가입된 정보를 이용하여 로그인 기능도 구현해보자.

// LoginPage.vue

<template>
  <div>
    <h1 class="page-header">로그인 페이지</h1>
    <LoginForm></LoginForm>
  </div>
</template>

<script>
import LoginForm from '@/components/LoginForm.vue';

export default {
  components: {
    LoginForm,
  },
};
</script>

// LoginForm.vue

<template>
  <div class="contents">
    <div class="form-wrapper form-wrapper-sm">
      <form @submit.prevent="submitForm" class="form">
        <div>
          <label for="username">id:</label>
          <input id="username" type="text" v-model="username" />
          <p class="validation-text">
            <span class="warning" v-if="!isUsernameValid && username">
              Please enter an email address
            </span>
          </p>
        </div>
        <div>
          <label for="password">pw:</label>
          <input id="password" type="text" v-model="password" />
        </div>
        <button
          :disabled="!isUsernameValid || !password"
          type="submit"
          class="btn"
        >
          로그인
        </button>
      </form>
      <p class="log">{{ logMessage }}</p>
    </div>
  </div>
</template>

<script>
import { loginUser } from '@/api/index';
import { validateEmail } from '@/utils/validation';

export default {
  data() {
    return {
      // form values
      username: '',
      password: '',
      // log
      logMessage: '',
    };
  },
  computed: {
    isUsernameValid() {
      return validateEmail(this.username);
    },
  },
  methods: {
    async submitForm() {
      try {
        // 비즈니스 로직
        const userData = {
          username: this.username,
          password: this.password,
        };
        const { data } = await loginUser(userData);
        console.log(data.user.username);
        this.logMessage = `${data.user.username} 님 환영합니다`;
      } catch (error) {
      console.log(error.response.data);
        this.logMessage = error.response.data;
      } finally {
        this.initForm();
      }
    },
    initForm() {
      this.username = '';
      this.password = '';
    },
  },
};
</script>

로그인 쪽에서는 에러 핸들링까지 구현해보았다.

기본적으로 async await는 에러를 핸들링할 내부로직이 별도로 없기에 try catch를 이용하여 에러를 핸들링한다.

error가 발생했을 때 서버에서 전달하는 response객체를 받아 화면에 표시를 해준다.

finally는 try 또는 catch가 발생하고 마지막에 반드시 실행하는 로직이다.

this.initForm()을 실행하기 때문에 로그인이 완료되든, 에러가 발생하든 입력폼을 초기화 시켜준다.