30일차 (JWT 디코딩)

미니 프로젝트를 진행하면서, db에 저장된 값들을 비요해서 조건부로 컴포넌트를 보여줘야 하는 일이 발생했다. mutation을 통해 데이터를 가져오려고 시도해보기도 했지만, 사용할 수 있는 API가 마땅히 없어서 Cookie에 저장된 값을 디코딩하여 비교하는 방식을 사용하게 되었고, 디코딩하는 방법이 필요했다. 

 

방법은 비교적 간단하다.

 

1. npm i base-64 : 디코딩을 도와주는 라이브러리를 설치한다.

2. Cookie에 저장된 토큰 값을 가져온다.

3. JWT는 콤마로 구분되기 때문에 콤마를 기준으로 문자열을 나눈뒤, payload 값인 가운데 값만 필요하기 때문에 뽑아서 저장한다.

4. 객체 형태로 변경하여 저장한다.

 

아래의 코드는 위의 방법을 통해 디코딩한 방법이다.

// 토큰 값 불러오기
const token = getCookie("token");

// payload 값만 뽑아내기
const payload = token.substring(token.indexOf(".") + 1, token.lastIndexOf("."));

// 객체형태로 변경하기
const dec = JSON.parse(base64.decode(payload));