[JWT인증] jwt토큰 디코딩하기

문제 상황

서버로부터 다음과 같은 jwt를 발급받은 후, jwt에 담긴 사용자 정보를 프론트 측에서 처리하여 알아내야 했다.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJlajA3MDk2MSIsImlkIjoxLCJleHAiOjE3MDQ3ODgyNjEsInVzZXJuYW1lIjoiZWowNzA5NjEifQ.2YkaT3E4owQvwENlrnhFIHEvULJdR8NC_bv1sc5CsIWw9rdNWdvqhFA1e6QQfU5rTNdE0UsyFppedQrt3MqmGQ

해결방법

base-64라이브러리를 이용해 디코딩하여 userId를 알아낸다.

1. base64 설치

npm i base-64

2. 토큰 자르기

• jwt 토큰은 header.payload.signature로 구성되어 있다.
• payload 부분에 사용자의 정보가 담겨 있으므로, 맨 앞 맨 뒤“.”를 찾아서 그 사이의 부분만 추출하면 payload만 출력된다.

3. base64라이브러리를 활용해 디코딩

4. 디코딩된 데이터는 타입이 String 이므로, 실제로 사용하기 위해 json 객체 형식으로 변환

import base64 from "base-64";

export default function DecodingInfo(jwtToken){

     //jwt토큰 디코딩 
     let payload = jwtToken.substring(jwtToken.indexOf('.')+1,jwtToken.lastIndexOf('.'));
     let decodingInfo = base64.decode(payload);
     let decodingInfoJson = JSON.parse(decodingInfo);
    
     return decodingInfoJson;

}