[리액트] jwt 디코딩

 

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLrsJXshozrp50iLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwiZW1haWwiOiJkZW5pc3QyM0BuYXZlci5jb20iLCJpZCI6MywiaWF0IjoxNjYzNDc0NzE1LCJleHAiOjE2NjM0NzY1MTV9.N4xjl-CARWTeRwBEJo_mZZB1u9PmERp507D-LfuiDn8;

서버로 부터 다음과 같은 jwt를 발급받았다고 하자.

jwt를 다시 서버로 보내서 필요한 정보를 받을 수 있지만 프론트에서 처리하고 싶다.

따라서 아래와 같은 방법을 사용하였다.

 

1. base64 설치

npm i base-64

통상 jwt를 base64로 인코딩 할 것이다.

그러면? 다시 base64로 디코딩하면 되므로 base-64 라이브러리를 먼저 설치해주자.

 

2. 토큰 자르기(payload 부분만)

jwt는 다음과 같은 형식이다.

때문에 앞에서부터 . (indexOf('.'))  뒤에서부터 . (lastIndeOf('.')) 을 찾아서 그 부분만 추출하면 paload만 출력한 것이다.

 

      let token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLrsJXshozrp50iLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwiZW1haWwiOiJkZW5pc3QyM0BuYXZlci5jb20iLCJpZCI6MywiaWF0IjoxNjYzNDc0NzE1LCJleHAiOjE2NjM0NzY1MTV9.N4xjl-CARWTeRwBEJo_mZZB1u9PmERp507D-LfuiDn8";
      let payload = token.substring(token.indexOf('.')+1,token.lastIndexOf('.'));

이러면

eyJzdWIiOiLrsJXshozrp50iLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwiZW1haWwiOiJkZW5pc3QyM0BuYXZlci5jb20iLCJpZCI6MywiaWF0IjoxNjYzNDc0NzE1LCJleHAiOjE2NjM0NzY1MTV9

페이로드만 추출하게 된다.

 

3. 디코딩

라이브러리를 사용하면 매우 간단하게 가능해진다.

let dec = base64.decode(payload)

 

4. 전체코드

import base64 from 'base-64';
      
const Test = () =>{
      let token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLrsJXshozrp50iLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwiZW1haWwiOiJkZW5pc3QyM0BuYXZlci5jb20iLCJpZCI6MywiaWF0IjoxNjYzNDc0NzE1LCJleHAiOjE2NjM0NzY1MTV9.N4xjl-CARWTeRwBEJo_mZZB1u9PmERp507D-LfuiDn8";
      let payload = token.substring(token.indexOf('.')+1,token.lastIndexOf('.')); 
      let dec = base64.decode(payload);
      return(
            <div>{dec}</div>
      )
} 

export default Test;

 

- 결과 -

다음과 같이 디코딩이 정상적으로 된 모습을 볼 수 있다.

(sub가 깨지는 이유는 한글이기 때문이다 utf-8변환은 추후에 포스팅 하겠다.)

 

하지만!

위 데이터는 타입이 String이다 때문에 실제로 사용하기 위해서는 객체로 변환해 주어야하며 객체 변환법은 아래를 참고하자.

https://smhope.tistory.com/534

[리액트] 문자열 객체로 변환하기