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

🎯 학습 목표

• 로그인한 사용자의 username을 Vuex 상태에 저장
• 새로고침 시에도 username 복구
• UI에서 사용자 이름을 편하게 표시할 수 있게 함

✅ 1단계: Vuex 상태에 username 추가

🔧 src/store/index.js

export default new Vuex.Store({
  state: {
    isDark: localStorage.getItem('theme') === 'dark',
    isLoggedIn: false,
    username: localStorage.getItem('username') || '', // ✅ 사용자 이름 저장
  },
  mutations: {
    toggleDark(state) {
      state.isDark = !state.isDark;
      localStorage.setItem('theme', state.isDark ? 'dark' : 'light');
    },
    login(state, token) {
      localStorage.setItem('token', token);
      state.isLoggedIn = true;
    },
    setUsername(state, name) {
      state.username = name;
      localStorage.setItem('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 || '';
      }
    },
  },
});

✅ 2단계: Login.vue에서 사용자 이름도 저장

🔧 변경 전

this.$store.commit('login', res.data.token);
localStorage.setItem('username', res.data.username);

🔧 변경 후

this.$store.commit('login', res.data.token);
this.$store.commit('setUsername', res.data.username);

✅ 3단계: 사용자 이름 사용 예시 (App.vue 등)

import { mapState } from 'vuex';

computed: {
  ...mapState(['isDark', 'isLoggedIn', 'username']),
}

<div v-if="isLoggedIn" class="user-info">
  👤 {{ username }} 님 환영합니다.
</div>

📦 요약

로그인 성공 시 사용자 이름도 Vuex에 저장하고, 새로고침해도 복구되도록 함으로써, 사용자 개인화 UI 구성이 더 쉬워졌다.

FE 저장소

GitHub - heroyooi/vue2-app at ch20