23-08-14 TIL

문제

• 프론트에서 쿠키로 사용되는 jwt 토큰에서 해당 사용자의 username을 추출해서 사용하고 싶다.

시도

• 우선은 현재 브라우저의 쿠키 문자열을 가져오는 기능을 구현
  • document.cookie;
    -> 이 코드 하나로 가져올 수 있음
• jwt 토큰을 보면 각각의 항목들이 있는데 이를 각각 분리하여 사용해야함
  • cookieString.split(';');
    -> 세미콜론을 기준으로 문자열을 분해
• 해당 쿠키의 이름을 가지고 값을 가져와야 함
  • trimmedItem.substr("Authorization=".length);
    -> Authorization이라는 Name을 가진 부분을 가져와서 value로 지정
• 해당 value를 디코딩하고 parse로 나눠서 sub 부분을 가져와야 함
  • const [, payloadBase64] = jwtToken.split('.');
    -> payload가 데이터가 들어있는 부분이고 Base64로 인코딩 되어있음
  • 디코딩을 진행 const decodedPayload = atob(jwtToken.split('.')[1]);
    -> 근데 이렇게 진행하자 영어로 username이 오면 괜찮은데 한글은 디코딩 하지 못함
    -> const decodedPayload = decodeURIComponent(escape(atob(jwtToken.split('.')[1]))); decodeURIComponent를 사용함으로써 username이 한글로 되어 있어도 디코딩 가능
  • parse 진행
    -> JSON.parse(decodedPayload);

해결

• 원하는 username 부분은 payload의 sub 부분에 있음
  • payloadObj.sub를 return
• 이제 백엔드 부분에 fetch로 연결해서 현재 로그인한 username으로 user의 정보를 뽑아올 수 있음