[React]토큰로그인시 토큰정보 저장하고,토큰에서 유저정보 파싱하여 사용하기

*이 포스팅은 신한투자증권 프로디지털 아카데미 수업에 기반하여 작성되었습니다 

 

<발행배경>

 

웹사이트에서 로그인 시, 로그인된 사용자의 정보를 이용해 여러 페이지가 작동합니다.
 
예를 들어, 독서 애플리케이션이라면
로그인 후 → 유저 정보를 받아서 → 유저가 읽고 있는 책 목록을 보여주어야 합니다.
이때 사용되는 것이 바로 토큰(Token) 이라는 개념입니다.
→ 토큰 안에는 유저 정보가 담겨 있습니다
 

<좀 더 상세한 과정>

1. 로그인 정보를 받으면 ->해당 정보를 가지고 토큰을 생성합니다

router.get("/protected", authenticate, (req, res) => {
  const { id, email, username, profile_image } = req.user;

  res.cookie("userInfo", JSON.stringify(req.user), {
    httpOnly: false, // 필요 시 secure, sameSite 옵션도 추가 가능
  });

  return res.status(200).json({
    isLoggedIn: true,
    user: { id, email, username, profile_image },
  });
});

로그인 후 토큰은 서버가 쿠키(Cookie) 로 내려줄 수도 있고,
혹은 클라이언트가 로컬 스토리지(Local Storage) 에 직접 저장할 수도 있습니다.
 
위 코드에서 res.cookie(...) 부분은 쿠키로 토큰을 내려주는 예시입니다.
이게 좀 더 일반적인 경우라고합니다.(로컬스토리지에 저장하는 경우와 비교해서)

2.그럼,로그인시 토큰은 쿠키에 저장됩니다.

확인은 개발자도구>어플리케이션>쿠키에서 확인 가능합니다.

 
authToken이 보이시나요? 쿠키에 토큰이 잘 저장된 예시이고,
저 외계어처럼 생긴 토큰의 내용을 실제 인간이 알아들을 수 있는 말로 풀어서보려면 ...
 
https://jwt.io/

JSON Web Tokens - jwt.io

 
이 사이트에 들어가 보시면됩니다. 
 

 
 
우측에 Decoded ~정보가 보이시나요?
토큰은 요런 정보를 가지고 있습니다.
그럼 우리는 저 id등을 써먹을 수 있겠죠 
 
이제 저 유저정보를 다른 페이지나 기능에서 써먹겠습니다!
 

3. 쿠키로부터 유저 정보를 받아오고,써먹습니다.

러프하게 한번 받아오는 코드 예시를 보시겠습니다.
Cookie.get을 통해 토큰정보를 받았습니다.

useEffect(() => {
    const fetchMyStudies = async () => {
      try {
        const token = Cookies.get("authToken");
        console.log("[fetchMyStudies] token:", token); // DEBUG: print token

        const res = await fetch("http://localhost:3001/my-studies", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
            include: "credentials", // 쿠키를 포함하기 위해 추가
          },
        });

 
 
서버에 요청을 보낼 때,(fetch) 토큰(유저정보)를 함꼐보냅니다.
이제 서버는 유저정보를 반영해서 정보를 보내줄 것입니다.
 
→ 이렇게 하면 쿠키에 저장된 토큰을 가져와서,
서버에 Authorization 헤더로 함께 전송할 수 있습니다.
 
서버 측에서 Authorization 헤더를 이렇게 처리합니다:

<서버 측 인증 처리>

토큰 앞의 Bearer 는 단순히 prefix 입니다.
→ 아래처럼 검사해야 합니다:
 

//common/middlewareAuth.js

const jwt = require("jsonwebtoken");

const authenticate = (req, res, next) => {
  try {
    let token = req.cookies.authToken;
    const headerToken = req.headers.authorization;

    if (!token && headerToken?.startsWith("Bearer ")) {
      token = headerToken.split(" ")[1];
    }

    if (!token) {
      return res.status(401).json({ message: "인증 토큰이 없습니다." });
    }

    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(403).json({ message: "유효하지 않은 토큰입니다." });
  }
};

module.exports = authenticate;

 

<저의 사용예시>

하단에 참여중인 스터디 
보이시나요?
저는 이 참여중인 스터디를 사용자에게 보여줄떄,토큰의 로그인정보를 사용했답니다 
호호