로그인 상태 유지 및 Store

이전 시간에 로그인 api 기능까지 구현을 하였다.

Store를 이용하여 로그인 로직과 데이터 저장을 Store영역에서 구현해본다.

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import { loginUser } from '@/api/index';

export default new Vuex.Store({
  state: {
    username: '',
    token: ''
  },
  mutation: {
    setUsername(state, username) {
      state.username = username;
    },
    setToken(state, token) {
      state.token = token;
    }
  },
  actions: {
    LOGIN({ commit }, userData) {
      loginUser(userData)
        .then({data} => {
          commit('setUsername', data.user.username);
          commit('setToken', data.token);
        });
        return data;
    }
  }
});

components/LoginForm.vue

<script>
중략...
export default {
  data() {
    return {
      username: '',
      password: '',
      logMessage: '',
    };
  },
  methods: {
    submitForm() {
      const userData = {
        username: this.username,
        password: this.password,
      };
      this.$store.dispatch('LOGIN', userData)
        .then(() => {
          this.$router.push(/main');
        });
    }
  }
};
</script>

LoginForm에서 submitForm()을 통해 LOGIN action이 dispatch되고 LOGIN action에서 username, token을 세팅한다.

근데 여기서 문제가 있다.
개발을 이미 해본 사람은 알겠지만, store는 페이지 새로고침시 데이터가 초기화 된다.
즉, 저장된 데이터가 유지되지 않아, 토큰으로 로그인 여부를 확인하는 상황에서 로그인 상태 또한 유지되지 않는다.

이러한 문제를 해결하고자, localStorage를 이용해본다.

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import { loginUser } from '@/api/index';

export default new Vuex.Store({
  state: {
    username: localStorage.getItem('username') || '',
    token: localStorage.getItem('accTkn') || '',
  },
  mutation: {
    setUsername(state, username) {
      state.username = username;
    },
    setToken(state, token) {
      state.token = token;
    }
  },
  actions: {
    LOGIN({ commit }, userData) {
      loginUser(userData)
        .then({data} => {
          commit('setUsername', data.user.username);
          commit('setToken', data.token);
          localStorage.setItem('accTkn', data.token);
          localStorage.setItem('username', data.user.username);
        });
        return data;
    }
  }
});

token은 이후 list, 등록, 수정, 삭제 api 호출에 필요한 정보로 추후 사용법에 대해 설명한다.

다음 포스팅에서는 이어서 axios Interceptor에 대해 설명한다.