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

✅ 1. 폴더 구조

src/
├── views/
│   ├── Login.vue
│   └── Register.vue
├── components/
│   └── TodoApp.vue
├── App.vue
├── main.js
└── router.js   ← 새로 추가

🔧 2. vue-router 설치 및 설정

npm install vue-router@3

📄 src/router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from './views/Login.vue';
import Register from './views/Register.vue';
import TodoApp from './components/TodoApp.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  {
    path: '/todos',
    component: TodoApp,
    meta: { requiresAuth: true },
  },
  { path: '*', redirect: '/login' },
];

const router = new VueRouter({ mode: 'history', routes });

// ✅ 인증 여부 체크
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.matched.some((r) => r.meta.requiresAuth) && !token) {
    next('/login');
  } else {
    next();
  }
});

export default router;

🛠 3. main.js에서 라우터 연결

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './assets/base.css';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

🖥 4. Login.vue – 로그인 컴포넌트

<template>
  <div class="auth">
    <h2>로그인</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="ID" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">로그인</button>
    </form>
    <router-link to="/register">회원가입</router-link>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LoginPage',
  data() {
    return { username: '', password: '' };
  },
  methods: {
    async handleLogin() {
      try {
        const res = await axios.post('/api/auth/login', {
          username: this.username,
          password: this.password,
        });
        localStorage.setItem('token', res.data.token);
        localStorage.setItem('username', res.data.username);
        this.$router.push('/todos');
      } catch (e) {
        alert('로그인 실패');
      }
    },
  },
};
</script>

🖥 5. Register.vue – 회원가입 컴포넌트

<template>
  <div class="auth">
    <h2>회원가입</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="username" placeholder="ID" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">회원가입</button>
    </form>
    <router-link to="/login">로그인</router-link>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'RegisterPage',
  data() {
    return { username: '', password: '' };
  },
  methods: {
    async handleRegister() {
      try {
        await axios.post('/api/auth/register', {
          username: this.username,
          password: this.password,
        });
        alert('회원가입 완료! 로그인 해주세요.');
        this.$router.push('/login');
      } catch (e) {
        alert('회원가입 실패');
      }
    },
  },
};
</script>

🔐 6. Axios에 토큰 자동 추가

📄 main.js

import axios from 'axios';

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

✅ 7. /todos 접근 제어 확인

• 로그인하지 않은 상태로 /todos 접근 시 자동으로 /login으로 이동
• 로그인 성공 후 /todos 정상 접근 가능
• 새로고침해도 인증 유지됨 (로컬스토리지 기반)

✅ 8. App.vue (네비게이션 + 다크모드 + 라우터뷰 + 로그아웃)

<template>
  <div :class="['app-container', { dark: isDark }]">
    <header class="nav-bar">
      <div class="left">
        <router-link to="/todos">할 일</router-link>
        <router-link to="/login">로그인</router-link>
        <router-link to="/register">회원가입</router-link>
      </div>

      <div class="right">
        <button @click="toggleDark">
          {{ isDark ? '☀️ 밝은모드' : '🌙 다크모드' }}
        </button>
        <button v-if="isLoggedIn" @click="logout">🔒 로그아웃</button>
      </div>
    </header>

    <!-- 라우팅에 따라 페이지 분기 -->
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false,
      isLoggedIn: !!localStorage.getItem('token'),
    };
  },
  created() {
    const saved = localStorage.getItem('theme');
    this.isDark = saved === 'dark';
  },
  methods: {
    toggleDark() {
      this.isDark = !this.isDark;
      localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
    },
    logout() {
      localStorage.removeItem('token');
      this.isLoggedIn = false;
      this.$router.push('/login');
    },
  },
  watch: {
    // 로그인 성공 시에도 갱신될 수 있도록 localStorage 감시
    $route() {
      this.isLoggedIn = !!localStorage.getItem('token');
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background-color: #fff;
  color: #222;
  transition: all 0.3s;

  &.dark {
    background-color: #1e1e1e;
    color: #f1f1f1;

    a {
      color: #f1f1f1;
    }
  }
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;

  .left a {
    margin-right: 16px;
    text-decoration: none;
    color: #333;
  }

  .right button {
    margin-left: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #aaa;
    cursor: pointer;
    background: none;
  }
}

.dark .nav-bar {
  background: #2a2a2a;
  border-color: #444;

  .left a {
    color: #f1f1f1;
  }

  .right button {
    color: #f1f1f1;
    border-color: #666;
  }
}
</style>

BE 저장소

GitHub - heroyooi/vue2-app at ch15