axios.get()으로 요청을 보낼 때, 서버에서 req.user?.id처럼 사용자 정보를 읽고 싶다면, 반드시 JWT를 포함한 인증 처리를 해야 하며, 이를 위해 다음 중 하나의 방법으로 토큰을 포함시켜야 합니다:

✅ 전제 조건

• 서버는 JWT를 발급하고, 클라이언트는 그 토큰을 보관하고 있어야 합니다.
• 서버에서는 JWT를 쿠키나 Authorization 헤더에서 읽어야 합니다.
• 예: Express의 인증 미들웨어에서 req.user = decodedToken으로 설정해두고 req.user?.id로 접근 가능.

✅ 1. [권장] JWT를 httpOnly 쿠키로 보내는 방식

💡 프론트엔드: withCredentials: true 설정

const response = await axios.get("<http://localhost:5001/api/mypage/bookmarks>", {
  withCredentials: true, // ✅ 쿠키 포함해서 요청
});

💡 서버 미들웨어 예시

import jwt from "jsonwebtoken";

export const authMiddleware = (req, res, next) => {
  const token = req.cookies.token; // ✅ 쿠키에서 JWT 추출

  if (!token) {
    return res.status(401).json({ message: "인증 실패" });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded; // ✅ 이후 req.user?.id로 접근 가능
    next();
  } catch (err) {
    return res.status(401).json({ message: "토큰 오류" });
  }
};

🎯 이 방식이면 axios.get(...) 요청 시 토큰이 자동으로 쿠키에 실려서 서버는 req.cookies.token에서 토큰을 읽고, req.user에 사용자 정보를 넣을 수 있습니다.

✅ 2. [대안] JWT를 Authorization 헤더로 직접 보내는 방식

💡 프론트엔드 요청 코드

const token = localStorage.getItem("token"); // 또는 어디에 저장했든

const response = await axios.get("<http://localhost:5001/api/mypage/bookmarks>", {
  headers: {
    Authorization: `Bearer ${token}`, // ✅ 헤더에 토큰 포함
  },
});

💡 서버 미들웨어

export const authMiddleware = (req, res, next) => {
  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    return res.status(401).json({ message: "인증 필요" });
  }

  const token = authHeader.split(" ")[1];

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded; // ✅ 이후 req.user.id 접근 가능
    next();
  } catch (err) {
    return res.status(401).json({ message: "토큰 유효하지 않음" });
  }
};