[Node.js] JWT + Cookie 사용하기

🎯 JWT + Cookie 사용하기

📝 Cookie 란?

• 웹 서비스에서 사용하는 정보를 클라이언트에 저장하고 HTTP 요청 시 이를 함께 전송하여 클라이언트 정보를 서버에 전달하는 기술이다.

 

📝 Session vs Cookie

• Session : 클라이언트 정보를 서버 측 저장소에 저장하고 사용
• Cookie : 클라이언트 정보를 클라이언트 (브라우저)에 저장하고 사용

 

📝 JWT + Cookie

• Session을 사용한 유저 로그인의 경우 : Cookie에 Session ID 저장 → Session Store에서 유저 정보 가져오기
• JWT를 쿠키에 저장하는 경우 : JWT로 요청 → 서명 확인 후 유저 정보 사용
  • 데이터베이스 접근이 줄어서 효율적인 인증 구현 가능

 

📝 JWT 로그인 구현하기

기존 프로젝트에서 jwt 구현하는 방법

1. 기존 세션으로 구현된 로그인을 비활성화
2. 로그인 로직에서 JWT 생성 후 쿠키로 전달
3. passport-jwt 패키지로 JWT 로그인 미들웨어 작성 및 사용

 

📝 JWT 로그인 구현하기

// app.use(session(...));
// app.use(passport.session());

• 세션 비활성화하기
• express-session 패키지 비활성화
• passport.session 기능 비활성화

 

📝 로그인 로직에 JWT 토큰 생성 및 쿠키 전달

setUserToken = (res, user) => {
    const token = jwt.sign(user, secret);
    res.cookie('token', token); // 클라이언트에 쿠키로 전달
}

// ---
router.post('/', passport.authenticate('local'),
    (req, res, next) => {
        setUserToken(res, req.user);

    res.redirect('/');
});

• res.cookie 함수 사용하여 token을 클라이언트에 쿠키로 전달

 

📝 passport-jwt 사용하기

const JwtStrategy = require('passport-jwt').Strategy;
const cookieExtractor = (req) => {
    const { token } = req.cookies;
    return token;
};

const opts = {
    secretOrKey: secret,
    jwtFromRequest: cookieExtractor,
}
module.exports = new JwtStrategy(opts, (user, done) => {
    done(null, user);
});

// ---
passport.use(jwt);

• passport-jwt 패키지를 이용해 요청된 JWT 토큰의 서명을 확인하고 인증하는 기능을 구현

 

📝 JWT 미들웨어 추가

app.use((req, res, next) => {
    if (!req.cookies.token) {
        next();
        return;
}

return passport.authenticate('jwt')(req, res, next);
});

• JWT 토큰은 기본적으로 모든 요청에 포함
• 요청에 토큰이 있는 경우 로그인된 상태로 처리하기 위해 모든 요청에 공통적으로 적용할 수 있는 미들웨어로 JWT 로그인을 추가

 

📝 로그아웃

res.cookie('token', null, {
    maxAge: 0,
});

• 로그아웃은 간단하게 클라이언트 쿠키를 삭제하여 처리 가능하다.
• token 값을 null로 전달하는 것과 함께, cookie의 만료시간을 0으로 설정하여 클라이언트가 쿠키를 바로 만료시키도록 전달