Json decoding시 한글 깨짐 질문

안녕하세요.
jwt 처리할 때 질문이 있는데요.
jwt 토큰 받아서, 그 decoding한 값을 화면에 뿌리는데, 한글이 깨져서 나오는데, 어떻게 해야 하는지 방법을 잘 모르겠습니다.

access token은
eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbkB0LW1vbmV0LmNvbSIsInNjb3BlcyI6WyJURU5BTlRfQURNSU4iXSwidXNlcklkIjoiODNiYmEzNDAtMDI3ZC0xMWU4LWI4ZmEtYWY1YjU0OTEyMDA0IiwiZmlyc3ROYW1lIjoi7ISx64Ko7IucIiwibGFzdE5hbWUiOiLqtIDrpqzsnpAiLCJlbmFibGVkIjp0cnVlLCJpc1B1YmxpYyI6ZmFsc2UsInRlbmFudElkIjoiMzkwMTNjNzAtMDI3ZC0xMWU4LWI4ZmEtYWY1YjU0OTEyMDA0IiwiY3VzdG9tZXJJZCI6IjEzODE0MDAwLTFkZDItMTFiMi04MDgwLTgwODA4MDgwODA4MCIsImlzcyI6InRoaW5nc2JvYXJkLmlvIiwiaWF0IjoxNTM1OTU1NDE2LCJleHAiOjM2NzU5NTU0MTZ9.N1Ms0LA7WtOel1pg6lTMRNDJosY3qfR6Q4SVuAUwmDPmTj4uYnKU0B-9Wdlqmg4HQRUXa23edOTU-TnAxfBoyg

이고, 이 값을 https://jwt.io/에 넣고 테스트해보면, 아래처럼 한글이 제대로 나오는데,

Screenshot%20from%202018-09-03%2015-21-17

아래와 같이 해서 찍어서 브라우저 확인해보면
let jwtData = JSON.parse(atob(this.jwt.split('.')[1])); console.log(jwtData)

이렇게 한글이 깨져서 나옵니다.
Screenshot%20from%202018-09-03%2015-23-09

검색해 봐도 죄다 서버에서 처리를 해 주는 방법만 검색이 나오는데, 어떻게 해야 할까요?

감사합니다.

var base64 = require(‘base-64’);

export const decodeJwt = (JWT) => {
let base64Url = JWT.split(’.’)[1];
let url = base64Url.replace(’-’, ‘+’).replace(’_’, ‘/’);
return JSON.parse(base64.decode(url));
};

위 코드는 jti값만 파싱한건데 이렇게 해보세요

해봤는데 똑같네요 … 다른방법을 시도해보세요 ㅜ

따라 해보다가, 안되어서 뭘 잘못했지 하며 다시 들어왔다가 답 다시 보게되었습니다.
암튼, 도움 매우 감사합니다^^

jwt인코딩할 때 base64 + url encoding 을 한다고 합니다.

아래 라이브러리를 사용하시면 될 것 같습니다~

> const token = "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbkB0LW1vbmV0LmNvbSIsInNjb3BlcyI6WyJURU5BTlRfQURNSU4iXSwidXNlcklkIjoiODNiYmEzNDAtMDI3ZC0xMWU4LWI4ZmEtYWY1YjU0OTEyMDA0IiwiZmlyc3ROYW1lIjoi7ISx64Ko7IucIiwibGFzdE5hbWUiOiLqtIDrpqzsnpAiLCJlbmFibGVkIjp0cnVlLCJpc1B1YmxpYyI6ZmFsc2UsInRlbmFudElkIjoiMzkwMTNjNzAtMDI3ZC0xMWU4LWI4ZmEtYWY1YjU0OTEyMDA0IiwiY3VzdG9tZXJJZCI6IjEzODE0MDAwLTFkZDItMTFiMi04MDgwLTgwODA4MDgwODA4MCIsImlzcyI6InRoaW5nc2JvYXJkLmlvIiwiaWF0IjoxNTM1OTU1NDE2LCJleHAiOjM2NzU5NTU0MTZ9.N1Ms0LA7WtOel1pg6lTMRNDJosY3qfR6Q4SVuAUwmDPmTj4uYnKU0B-9Wdlqmg4HQRUXa23edOTU-TnAxfBoyg"
undefined
> const jwt_decode = require('jwt-decode')
undefined
> var decoded = jwt_decode(token);
undefined
>
> console.log(decoded);
{ sub: 'admin@t-monet.com',
  scopes: [ 'TENANT_ADMIN' ],
  userId: '83bba340-027d-11e8-b8fa-af5b54912004',
  firstName: '성남시',
  lastName: '관리자',
  enabled: true,
  isPublic: false,
  tenantId: '39013c70-027d-11e8-b8fa-af5b54912004',
  customerId: '13814000-1dd2-11b2-8080-808080808080',
  iss: 'thingsboard.io',
  iat: 1535955416,
  exp: 3675955416 }
2 Likes

잘 됩니다!
시간 내가면서 이렇게 친절히 해결책을 찾아서 알려주셔서 감사합니다.
저도 실력을 쌓아 백순기님처럼 남에게 해결책을 줄 수 있는 경지에 오르도록 노력할께요.

1 Like