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

🎯 학습 목표

• JWT 인증 토큰을 활용해 로그인한 사용자만 자신의 Todo를 불러오고 등록/수정/삭제할 수 있도록 구현한다.
• 클라이언트에서는 토큰만 보내고, 서버는 그 토큰을 통해 사용자 정보를 자동으로 추출한다.

📁 1. 서버 인증 미들웨어 생성

🔧 middlewares/auth.js

const jwt = require('jsonwebtoken');
const SECRET = 'my-vue-jwt-secret';

module.exports = function (req, res, next) {
  const authHeader = req.headers.authorization;
  if (!authHeader) return res.status(401).json({ message: '인증 토큰이 없습니다.' });

  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, SECRET); // { username }
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(403).json({ message: '유효하지 않은 토큰입니다.' });
  }
};

🛠 2. routes/todos.js 수정 – 사용자별 Todo 처리

✅ 변경 핵심

• req.user.username으로 사용자 구분
• 클라이언트에서 userId 따로 보낼 필요 없음

🔁 수정된 routes/todos.js

const express = require('express');
const fs = require('fs').promises;
const path = require('path');
const auth = require('../middlewares/auth');

const router = express.Router();
const DATA_FILE = path.join(__dirname, '../data/todos.json');

let todosByUser = {};

const loadTodos = async () => {
  try {
    const data = await fs.readFile(DATA_FILE, 'utf-8');
    todosByUser = JSON.parse(data);
  } catch {
    todosByUser = {};
  }
};

const saveTodos = async () => {
  await fs.writeFile(DATA_FILE, JSON.stringify(todosByUser, null, 2));
};

loadTodos();

// ✅ 인증 미들웨어 전역 적용
router.use(auth);

// ✅ GET /todos
router.get('/', (req, res) => {
  const username = req.user.username;
  res.json(todosByUser[username] || []);
});

// ✅ POST /todos
router.post('/', async (req, res) => {
  const { title, completed = false } = req.body;
  const username = req.user.username;

  if (!title) return res.status(400).json({ message: '할 일을 입력하세요.' });

  const newTodo = {
    id: Date.now(),
    title,
    completed,
  };

  if (!todosByUser[username]) {
    todosByUser[username] = [];
  }

  todosByUser[username].unshift(newTodo);
  await saveTodos();
  res.status(201).json(newTodo);
});

// ✅ PUT /todos/:id
router.put('/:id', async (req, res) => {
  const username = req.user.username;
  const id = Number(req.params.id);
  const { title, completed } = req.body;

  if (!todosByUser[username]) return res.sendStatus(404);

  todosByUser[username] = todosByUser[username].map((todo) =>
    todo.id === id
      ? {
          ...todo,
          ...(title !== undefined && { title }),
          ...(completed !== undefined && { completed }),
        }
      : todo
  );

  await saveTodos();
  res.sendStatus(200);
});

// ✅ DELETE /todos/:id
router.delete('/:id', async (req, res) => {
  const username = req.user.username;
  const id = Number(req.params.id);

  if (!todosByUser[username]) return res.sendStatus(404);

  todosByUser[username] = todosByUser[username].filter((todo) => todo.id !== id);
  await saveTodos();
  res.sendStatus(200);
});

module.exports = router;

🌐 3. server.js는 그대로 사용 가능

app.use('/todos', todosRouter); // 인증은 내부에서 처리됨
app.use('/auth', authRouter);   // 회원가입/로그인은 인증 불필요

✅ 4. src\components\TodoApp.vue 수정

✅ token 정의 위치

data() {
  return {
    newTodo: '',
    todos: [],
    editingId: null,
    token: localStorage.getItem('token'), // ✅ 여기에서 토큰 가져오기
  };
},

✅ Axios 요청 시 헤더에 토큰 포함하는 방법

axios.get, axios.post 등 모든 요청에 아래처럼 headers 추가합니다:

const config = {
  headers: {
    Authorization: `Bearer ${this.token}`,
  },
};

<script>
import axios from 'axios';
import TodoItem from './TodoItem.vue';

const API_URL = '/api/todos';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: '',
      todos: [],
      editingId: null,
      token: localStorage.getItem('token'), // ✅ token 저장
    };
  },
  mounted() {
    this.fetchTodos();
  },
  methods: {
    // ✅ 공통 헤더
    authHeader() {
      return {
        headers: {
          Authorization: `Bearer ${this.token}`,
        },
      };
    },

    async fetchTodos() {
      try {
        const res = await axios.get(API_URL, this.authHeader());
        this.todos = res.data;
      } catch (err) {
        console.error('할 일 불러오기 실패:', err);
      }
    },

    async addTodo() {
      const title = this.newTodo.trim();
      if (!title) return;
      try {
        const res = await axios.post(
          API_URL,
          { title, completed: false },
          this.authHeader()
        );
        this.todos.unshift(res.data);
        this.newTodo = '';
      } catch (err) {
        console.error('할 일 추가 실패:', err);
      }
    },

    async removeTodo(id) {
      try {
        await axios.delete(`${API_URL}/${id}`, this.authHeader());
        this.todos = this.todos.filter((todo) => todo.id !== id);
      } catch (err) {
        console.error('삭제 실패:', err);
      }
    },

    startEdit(id) {
      this.editingId = id;
    },

    async updateTodo(id, newTitle) {
      if (newTitle === null) {
        this.editingId = null;
        return;
      }
      const title = newTitle.trim();
      if (!title) return;
      try {
        await axios.put(`${API_URL}/${id}`, { title }, this.authHeader());
        this.todos = this.todos.map((todo) =>
          todo.id === id ? { ...todo, title } : todo
        );
        this.editingId = null;
      } catch (err) {
        console.error('수정 실패:', err);
      }
    },

    async toggleComplete(id) {
      const target = this.todos.find((todo) => todo.id === id);
      if (!target) return;
      const updated = { ...target, completed: !target.completed };
      try {
        await axios.put(
          `${API_URL}/${id}`,
          { completed: updated.completed },
          this.authHeader()
        );
        this.todos = this.todos.map((todo) =>
          todo.id === id ? updated : todo
        );
      } catch (err) {
        console.error('체크 상태 변경 실패:', err);
      }
    },
  },
};
</script>

✅ 수정 포인트

1. ✅ token → this.token 으로 변경
2. ✅ 모든 Axios 요청에 Authorization: Bearer ${this.token} 추가
3. ✅ userId는 더 이상 사용하지 않으므로 제거 (서버는 JWT에서 유저정보 추출)

🧪 테스트 체크리스트

📦 요약

• 사용자 로그인 정보를 토큰에 담고 서버에서 안전하게 꺼내 사용하는 구조를 완성했다.
• 이제 사용자별로 Todo 데이터가 분리되고, 인증된 사용자만 자신의 데이터를 다룰 수 있다.

FE 저장소

GitHub - heroyooi/vue2-app at ch16

BE 저장소

GitHub - heroyooi/vue2-api at ch16