🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• Vuex auth 모듈에 login action을 추가한다
• 컴포넌트(Login.vue)에서는 this.$store.dispatch()만 호출하도록 간소화
• API 응답 처리, 상태 변경, 에러 처리 등을 모듈 내부에서 처리

✅ 1단계: auth.js 모듈에 actions 추가

// store/modules/auth.js
import axios from 'axios';
import { isTokenExpired } from '@/utils/jwt';

const state = {
  isLoggedIn: false,
  username: localStorage.getItem('username') || '',
};

const mutations = {
  setToken(state, token) {
    localStorage.setItem('token', token);
    state.isLoggedIn = true;
  },
  setUsername(state, name) {
    localStorage.setItem('username', name);
    state.username = name;
  },
  logout(state) {
    localStorage.removeItem('token');
    localStorage.removeItem('username');
    state.isLoggedIn = false;
    state.username = '';
  },
  syncLoginState(state) {
    const token = localStorage.getItem('token');
    const name = localStorage.getItem('username');

    if (!token || isTokenExpired(token)) {
      localStorage.removeItem('token');
      localStorage.removeItem('username');
      state.isLoggedIn = false;
      state.username = '';
    } else {
      state.isLoggedIn = true;
      state.username = name || '';
    }
  },
};

const actions = {
  async login({ commit }, { username, password }) {
    try {
      const res = await axios.post('/api/auth/login', {
        username,
        password,
      });

      commit('setToken', res.data.token);
      commit('setUsername', res.data.username);

      return { success: true };
    } catch (error) {
      return {
        success: false,
        message: error.response?.data?.message || '로그인 실패',
      };
    }
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

✅ 2단계: Login.vue에서 Vuex action 사용

🔧 변경 전

const res = await axios.post('/api/auth/login', { ... });
localStorage.setItem('token', res.data.token);
localStorage.setItem('username', res.data.username);

🔧 변경 후

const result = await this.$store.dispatch('auth/login', {
  username: this.username,
  password: this.password,
});
if (result.success) {
  this.$router.push('/todos');
} else {
  alert(result.message);
}

✅ 3단계: 최종 Login.vue 코드 예시

<script>
export default {
  name: 'LoginPage',
  data() {
    return { username: '', password: '' };
  },
  methods: {
    async handleLogin() {
      try {
        const result = await this.$store.dispatch('auth/login', {
          username: this.username,
          password: this.password,
        });
        if (result.success) {
          this.$router.push('/todos');
        } else {
          alert(result.message);
        }
      } catch (e) {
        alert('로그인 실패');
      }
    },
  },
};
</script>

📦 요약

이 강의에서는 로그인 API 호출과 상태 처리를 Vuex auth 모듈의 actions로 분리함으로써 컴포넌트가 더 간단하고 역할이 분리된 구조로 개선되었다.

GitHub - heroyooi/vue2-app at ch22