[TIL] Week 9 JWT Token 활용

🗝️ JWT 사용해보기

로그인할 때 발행해주는 토큰으로 요청을 보낸 사용자가 누구인지 판별해주려고 한다.

먼저 토큰을 어떻게 활용하는 지 연습부터 해보자.

 

var jwt = require('jsonwebtoken');
const express = require('express');
const app = express();
const dotenv = require('dotenv');

dotenv.config();

app.listen(process.env.PORT);
  
app.get('/', function (req, res) { 
  var token = jwt.sign({ foo : 'bar'}, process.env.PRIVATE_KEY);
  
  res.cookie("jwt", token, {
    httpOnly : true
  });

  res.send("토큰 발행 완료");
});

먼저 토큰 발행은 jsonwebtoken 모듈을 활용 해 페이로드와 나만의 암호키로 발행해주고 있다. 

그렇게 발행된 토큰은 쿠키에 담아서 반환해준다. 

 

포스트맨으로 확인해보니 Response Headers에 잘 담겨 있다.

 

한 번 더 발행해본 뒤 확인했더니

Request Headers 쿠키에도 토큰이 담겨있다. 그것도 이전 요청에서 받은 토큰값이 들어가있다. 

 

사실 쿠키는 서버와 클라이언트가 기존의 값을 계속 가지고 다닌다.

같은 이름의 새로운 값이 들어오면 덮어쓰기를 하는 방식이라 그렇지 않는다면 그 값을 계속 가지고 있는 것이다.

 

그러다보니 새로운 값이 들어올 때마다 쿠키의 길이는 점점 길어질거고

덮어쓰기가 제대로 안되는 경우 예전 값을 계속 가지고 있는다. 

그렇게 때문에 쿠키 삭제가 필요하다. 

 

 

이번에는 쿠키로 들어온 토큰을 받아서 복호화를 해보자.

요청할 때 토큰을 사용하려면 Headers에 담아주면 된다.

app.get('/jwt/decoded', function (req, res) { 
  let receivedJWT = req.headers["authorization"]
  var decoded = jwt.verify(receivedJWT, process.env.PRIVATE_KEY);
  res.send(decoded);
});

headers 값을 받아다 복호화하는 코드에 넣어주기만 하면 된다. 

그럼 복호화된 값이 응답에 잘 뜨는 것을 볼 수 있다. 

 

🩷 좋아요 API에 JWT 구현

앞서 좋아요 API 구현 시 req.body에 userId를 받아 사용했다.

이제 jwt를 활용해 id값을 받아오도록 수정하려 한다.

 

const token = jwt.sign({
                    id : loginUser.id,
                    email : loginUser.email
                }, process.env.PRIVATE_KEY, {
                    expiresIn : '5m',
                    issuer : 'mingyeong'
                });

먼저 id값이 필요하니 토큰 발행할 때 추가해주었다.

 

토큰을 복호화해보면 이렇게 id와 email이 함께 나온다.

이제 이 id를 사용하면 된다.

 

let sql = `INSERT INTO likes (user_id, liked_book_id) VALUES (?, ?)`;
let values = [decodedJWT.id, book_id];

sql문의 values에 복호화된 jwt의 id로 넣어주면 끝 ! 

이제 body에 user_id를 넣어주지 않아도 토큰을 활용 해 id를 찾아 요청을 보내줄 수 있게 되었다.

 

🎁 user_id 꺼내기 모듈화

user_id가 필요한 API 요청이 많으니 모듈화를 해줄 필요가 있다. 

(당장 좋아요 취소할 때도 동일하게 필요하다.)

 

function ensureAuthorization(req) {
    let receivedJWT = req.headers["authorization"];
    console.log("receivedJWT : ", receivedJWT);

    let decodedJWT = jwt.verify(receivedJWT, process.env.PRIVATE_KEY);
    console.log("decodedJWT : ", decodedJWT);

    return decodedJWT;
}

Headers에서 jwt를 꺼내고 복호화하는 코드를 함수로 빼내주었다.

 

let authorization = ensureAuthorization(req);

 

이제 필요한 곳에서 함수를 호출하면 user_id를 사용할 수 있다.

 

이렇게 함수로 활용하면 함수명을 통해 코드 해석하는 데 도움을 준다.

💡 함수명은 동사가 앞으로 오도록 하여 뭐하는 함수인지 명확하게 나타내 주는 것이 좋다.

 

또한 함수를 호출하는 위치가 선언하는 위치보다 위에 있어야 한번만 읽어도 이해하기 좋다. 

 

🚩 jwt expired

같은 토큰으로 요청했지만 토큰의 유효기간이 지나면 expired 에러가 발생한다.

 

500에러는 서버측이 잘못되었다는 에러로 치명적인 에러다

토큰의 유효기간 만료는 500에러를 낼 게 아니고 예외 처리를 해줘야 한다.

 

유효기간이 지난 토큰으로 요청이 들어왔다면  👉🏻 ' 로그인(인증) 세션(유지되는 상태)이 만료되었습니다. 다시 로그인 하세요.'

 

✔️ 예외 처리

node에서 준비해 둔 jwt 에러 3가지

• JsonWebTokenError : 문제있는 토큰
• NotBeforeError : jwt가 아닌 경우
• TokenExpiredError : 유효기간 토큰 = 만료된 토큰

 

try catch 구문

: 수많은 (개발자가 예상하지 못한) 에러(실수, 사용자가 잘못 입력, DB가 잘못 응답 등 ..)를 처리하는 문법

 

// A코드 실행
if (A에서 발생한 실수1) {
} else if (A에서 발생한 실수2) { 
} …

if문은 경우의 수가 수없이 늘어날 수 있다.

 

try { 
    // A코드 실행  
} catch (err) { 
    // 에러 처리 
}

try catch는 여러 개 만들지 않아도 어떤 실수가 발생했는 지 알 수 있다.

 

에러는 보통 실행해봐야 알 수 있다. 

즉, if문으로 미리 처리해줄 수 없다. 

 

try catch를 사용하면 어떤 에러여도 잡아준다. 

 

try 구문의 코드를 실행하다가 에러가 발생하면 try구문을 멈추고 catch로 err와 함께 빠져나간다.

try 구문에서 어떤 에러가 발생해도, 우리가 다 if문 분기 처리 해주던 내용들이 알아서 catch에 잡힌다.

ex. SyntaxError, TypeError … 

 

🥊 에러 객체

자바스크립트가 고대 개발자분들의 노고를 보고 "내장" 에러 객체를 만들어두었다.

앞서 언급한 jwt 모듈에서 제공하는 에러 객체도 있고 직접 만들어 사용할 수도 있다.

 

이처럼 에러도 객체이기에 이름과 내용을 따로 불러줄 수 있다.

 

⚾ Throw 연산자

: 에러를 발생시키는 연산자

 

throw 에러 객체;

throw new SyntaxError(메세지);

throw 뒤에 나오는 에러를 발생시키는 구문

 

에러 이름은 지정해줄 순 없지만 매개변수로 메시지를 전달해줄 수 있다.

 

그럼 에러 발생은 언제 시켜주는 걸까?

JSON.parse가 문제없이 넘어가긴 했지만 json.name은 없는 값인데 에러가 아닌 undefined를 반환해주고 있다.

에러가 발생하지 않았기 때문에 try catch를 사용해도 동일한 결과가 나타난다.

 

js입장에선 에러가 아닐 지 몰라도 우리 입장에선 이건 입력값이 잘못된 에러다 ! 

이럴 때 사용하는 것이 Throw 인 것이다.

 

if문으로도 예외 처리를 해줄 수 있지만 이후로 오는 코드들도 계속 실행이 된다.

 

throw로 에러를 던져주면 바로 catch로 넘어가 이후 코드는 실행되지 않는다. 

 

🧨 TokenExpiredError & JsonWebTokenError

function ensureAuthorization(req) {
    try {
        let receivedJWT = req.headers["authorization"];
        console.log("receivedJWT : ", receivedJWT);
    
        let decodedJWT = jwt.verify(receivedJWT, process.env.PRIVATE_KEY);
        console.log("decodedJWT : ", decodedJWT);

        return decodedJWT;
    } catch (err) {
        console.log(err.name);
        console.log(err.message);
    }
};

이제 ensureAuthorization에선 에러 발생 시 에러를 던져준다.

 

하지만 ensureAuthorization을 호출하는 곳에선 예외 처리가 안돼 아래 코드까지 실행되었다.

ensureAuthorization이 에러가 났기에 authorization.id가 없어서 또 에러가 발생했다. 

 

function ensureAuthorization(req, res) {
    try {
        let receivedJWT = req.headers["authorization"];
        console.log("receivedJWT : ", receivedJWT);
    
        let decodedJWT = jwt.verify(receivedJWT, process.env.PRIVATE_KEY);
        console.log("decodedJWT : ", decodedJWT);

        return decodedJWT;
    } catch (err) {
        console.log(err.name);
        console.log(err.message);

        return res.status(StatusCodes.UNAUTHORIZED).json({
            "message" : "로그인 세션이 만료되었습니다. 다시 로그인 하세요."
        });
    }
};

그래서 ensureAuthorization 에서 에러가 날 경우 에러로 응답해주도록 수정했다. 

 

그랬더니 이번엔 ERR_HTTP_HEADERS_SENT 에러가 발생했다.

이 에러는 res를 두번보내서 발생한 에러다.

 

ensureAuthorization 에서 에러가 나서 res를 보냈는데

getCartItems에서 쿼리에서 또 에러가 나서 res를 또 보냈기 때문이다.

 

ensureAuthorization 에선 res를 보내지 말고 err만 반환해주고

getCartItems에서 res를 보내주는 걸로 수정해야겠다.

 

const getCartItems = (req, res) => {
    const {selected} = req.body;

    let authorization = ensureAuthorization(req, res);

    if(authorization instanceof jwt.TokenExpiredError) {
        return res.status(StatusCodes.UNAUTHORIZED).json({
            "message" : "로그인 세션이 만료되었습니다. 다시 로그인 하세요."
        });
    } else {
        let sql = `SELECT cartItems.id, book_id, title, summary, quantity, price 
                    FROM cartItems LEFT JOIN books 
                    ON cartItems.book_id = books.id
                    WHERE user_id = ? AND cartItems.id IN (?)`;
        let values = [authorization.id, selected];
    
        conn.query(sql, values,
            (err, results) => {
                if(err) {
                    console.log(err);
                    return res.status(StatusCodes.BAD_REQUEST).end();
                }
    
                return res.status(StatusCodes.OK).json(results);
            }
        );
    }
};

instanceof : 왼쪽 변수가 오른쪽 변수처럼 생겼는 지 확인하는 구문

 

이번엔 잘못된 토큰이 들어간 경우, JsonWebTokenError도 처리해보자.

 

if(authorization instanceof jwt.TokenExpiredError) {
    return res.status(StatusCodes.UNAUTHORIZED).json({
        "message" : "로그인 세션이 만료되었습니다. 다시 로그인 하세요."
    });
} else if (authorization instanceof jwt.JsonWebTokenError) {
    return res.status(StatusCodes.BAD_REQUEST).json({
        "message" : "잘못된 토큰입니다."
    });
}

TokenExpiredError와 동일한 방법으로 처리해주었다.

 

그런데 이걸 매 코드마다 쓰기엔 너무 반복된다.

외부 파일에 작성 후 모듈처럼 불러서 사용하도록 해봐야할 것 같다.