[Vue.js] 로그인 기능 구현하기

Vue.js로 로그인을 하기 위해서 프론트측에서는 로그인 하기 위한 view와 상태관리를 할 수 있는 store(Vuex)가 필요하다. Vuex 관련 내용은 아래 글을 참고하길 바란다.

 

(물론 Vuex를 사용하지 않고도 구현은 할 수 있지만 추적용이성이 현저히 떨어질 것이라고 생각한다.)

 

2021.01.19 - [Vue.js] - [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기

[Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기

 

로그인을 하기 위해서는 백엔드측에서는 실제 데이터 처리를 담당할 API를 생성해주어야 한다.

본 글에서는 로그인을 처리하는 API가 있다는 가정하에 로그인 기능을 구현해보도록 하겠다.

 

Login.vue

<template>
  <v-app id="app">
    <v-main>
      <v-container
        style="position: relative; top: 20%; margin-left: 20%"
        class="text-xs-center"
      >
        <v-layout row wrap class="text-xs-center">
          <v-flex>
            <v-card flat class="mx-auto" max-width="800">
              <v-row style="margin-top: 60px">
                <v-col>
                  <v-form style="width: 400px; height: 300px">
                    <div class="mx-3">
                      <v-icon color="black" size="30px">person</v-icon>
                      userId
                      <div class="mx-1">
                        <v-text-field
                          placeholder="userId"
                          v-model="userId"
                          required
                        ></v-text-field>
                      </div>
                    </div>
                    <div class="mx-3">
                      <v-icon color="black" size="30px">lock</v-icon>
                      userPassword
                      <div class="mx-1">
                        <v-text-field
                          placeholder="userPassword"
                          type="password"
                          v-model="userPassword"
                          required
                        ></v-text-field>
                      </div>
                    </div>

                    <v-card-actions>
                      <v-btn
                        color="#2c4f91"
                        dark
                        large
                        block
                        @click="loginSubmit"
                        >Login</v-btn
                      >
                    </v-card-actions>
                  </v-form>
                </v-col>
              </v-row>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      userId: null,
      userPassword: null,
    };
  },
  methods: {
    loginSubmit() {
      let saveData = {};
      saveData.userId = this.userId;
      saveData.userPassword = this.userPassword;

      try {
        this.$axios
          .post(HOST + "/signin", JSON.stringify(saveData), {
            headers: {
              "Content-Type": `application/json`,
            },
          })
          .then((res) => {
            if (res.status === 200) {
              // 로그인 성공시 처리해줘야할 부분
            }
          });
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

 

임의의 로그인 view를 만들었다. 회원 정보(Id, password)가 이미 서버에서 관리가 되고 있다는 가정하에 submit 버튼을 누르면 Id와 Password가 서버에 Post 요청을 할 것이다.

 

 

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
   ]
})

로그인 페이지로 제일 먼저 라우팅 되어야 하기 때문에 해당 라인을 추가해줬다.

 

 

store/modules/userStore.js

import router from '@/router'

const userStore = {
    state: {
        userId: '',
        userName: '',
        token: ''
    },
    mutations: {
        login: function (state, payload) {
            state.userId = payload.userId
            state.userName = payload.userName
            state.token = payload.token
        },
        loginCheck: function (state) {
            if (!state.token) {
                router.push({
                    name: 'login'
                }).catch(error => {
                    console.log(error)
                })
            }
        }

    }
}

export default userStore

위에서 의미하는 token은 로그인 성공시 백앤드에서 줘야할 token이다. 이후에 api를 call할 때 token을 담아보내어 로그인되어 있는 사용자의 요청이라는 것을 확인시켜주므로 일종의 인증요소라고 볼 수 있을 것 같다.

 

로그인을 성공하게 되면 login mutation을 부를 예정이다.

loginCheck는 다른 페이지로 이동할 때 로그인 되어있는 사용자만 접근할 수 있는 페이지라면 페이지 이동시에 체크해주는 기능이다. (이는 vue router의 beforeEnter를 사용해서 구현할 수도 있다. 다음에 router에 관련하여 더 자세하게 다룰 예정)

 

 

Login.vue

  methods: {
    loginSubmit() {
      let saveData = {};
      saveData.userId = this.userId;
      saveData.userPassword = this.userPassword;

      try {
        this.$axios
          .post(HOST + "/signin", JSON.stringify(saveData), {
            headers: {
              "Content-Type": `application/json`,
            },
          })
          .then((res) => {
            if (res.status === 200) {
              // 로그인 성공시 처리해줘야할 부분
              this.$store.commit("login", res.data);
              this.$router.push("이동할 페이지 path");
            }
          });
      } catch (error) {
        console.error(error);
      }
    },
  },

이렇게 Vue.js를 사용하여 간단하게 로그인을 구현하는 방법에 대해 알수있다.

 

하지만 여기에서 새로고침을 한다면 새로운 문제점을 찾을 수 있다.

바로 Vuex는 새로고침을 한다면 모든 상태값을 초기화 시켜버린다는 점이다..!

이를 해결하는 방법은 다음 포스팅에서 이어 진행하겠다.