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

🎯 학습 목표

• JWT 토큰에 설정된 exp(만료시간)를 파싱하여 확인
• 토큰이 만료되었으면 자동으로 로그아웃 처리 및 알림
• 앱이 시작되거나 페이지 이동 시마다 만료 여부 검사

✅ 1. JWT 토큰에서 만료시간(exp) 읽는 함수 작성

📁 src/utils/jwt.js 생성

export function getTokenPayload(token) {
  try {
    const payload = token.split('.')[1];
    const decoded = atob(payload);
    return JSON.parse(decoded); // { exp, username, ... }
  } catch {
    return null;
  }
}

export function isTokenExpired(token) {
  const payload = getTokenPayload(token);
  if (!payload || !payload.exp) return true; // 유효하지 않은 토큰은 만료 처리

  const now = Math.floor(Date.now() / 1000); // 현재 시각 (초 단위)
  return payload.exp < now; // true면 만료됨
}

✅ 2. Vuex 스토어에서 만료 확인 및 자동 로그아웃 추가

🔧 store/index.js 수정

import Vue from 'vue';
import Vuex from 'vuex';
import { isTokenExpired } from '../utils/jwt';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isDark: localStorage.getItem('theme') === 'dark',
    isLoggedIn: false,
  },
  mutations: {
    toggleDark(state) {
      state.isDark = !state.isDark;
      localStorage.setItem('theme', state.isDark ? 'dark' : 'light');
    },
    login(state, token) {
      localStorage.setItem('token', token);
      state.isLoggedIn = true;
    },
    logout(state) {
      localStorage.removeItem('token');
      state.isLoggedIn = false;
    },
    syncLoginState(state) {
      const token = localStorage.getItem('token');
      if (!token || isTokenExpired(token)) {
        localStorage.removeItem('token');
        state.isLoggedIn = false;
      } else {
        state.isLoggedIn = true;
      }
    },
  },
});

syncLoginState() 내부에서 토큰 만료 여부를 검사하고, 만료되었으면 자동 로그아웃 처리합니다.

✅ 3. App.vue에서 앱 시작 시 동기화 호출

created() {
  this.syncLoginState();
}

✅ 4. 라우터 이동 시 토큰 만료도 체크

🔧 router.js

import store from './store';

router.beforeEach((to, from, next) => {
  store.commit('syncLoginState'); // ✅ 이동 전마다 로그인 상태 동기화

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!store.state.isLoggedIn) {
      alert('세션이 만료되었거나 로그인되지 않았습니다.');
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

📦 요약

이 강의에서는 JWT의 exp 값을 검사해 토큰 만료 여부를 확인하고, 만료된 경우 자동 로그아웃 처리 기능을 추가하였습니다. 이를 통해 보안과 사용자 경험을 동시에 개선했습니다.

GitHub - heroyooi/vue2-app at ch19