2일차 입니다. 어제 로그인, 회원가입 페이지의 자바스크립트에 이어 오늘 마이페이지, 프로필 수정 페이지의 자바스크립트를 작성했습니다.

아직 참고할 html도 백엔드도 개발되지 않은 환경에서 JS를 단독으로 개발하는게 생각보다 어려운 것 같습니다.

다같이 작성한 api명세도 와이어프레임과 항목에 차이가 있어서 회의시간에 어느 쪽을 선택할 것인지 협의하기도 했구요.

오늘 사례 하나는 response에 유저정보가 담겨서 올 때, pk가 담겨오지 않게 api설계를 해놨는데 pk를 필요로 하는 상황이 발생해서 곤란해하고 있었습니다.

본래 백엔드 개발을 맡으신 분에게 요청해서 보내주는 값에 pk를 첨부해 달라고 하면 금방 마무리 될 일이지만, api명세서 대로 만들고 싶어 도전해보기로 했습니다.

현재 보유한 유저정보에는 pk가 담겨있지 않지만 인증을 위해 사용하는 토큰에는 사용자의 아이디가 담겨있었습니다.

그래서 해당 토큰에서 pk를 뽑아올 수 있는 방법을 구상하게 되었고 코드를 작성해 완성시킬 수 있었습니다.

하지만 아직 프론트도 백엔드도 자료가 저한테 없다보니 제대로 동작하는지 아직 확인해보지는 못했습니다..

코드 확인

let userId = null;

먼저 전역 변수에 해당 id를 담게 만들어 사용하게 했습니다.

const accessToken = localStorage.getItem('access_token');
userId = getPKFromAccessToken(accessToken);

유저의 정보를 가져오는 함수에 적힌 내용으로 로컬 스토리지에 저장된 access토큰을 가져와 getPKFromAccessToken라고 이름지은 함수에 넣어주었습니다.

function getPKFromAccessToken(accessToken) {
    const tokenParts = accessToken.split('.'); 
    const payloadBase64 = tokenParts[1];
    const payload = JSON.parse(atob(payloadBase64));
    const userId = payload.user_id;
    return userId;
}

토큰은 simple JWT토큰을 사용하고 있는데 이 토큰은 .을 기준으로 3부분으로 나누어집니다.

그중 제가 알고싶어하는 내용은 가운데에 있는 payload부분임으로 해당 부분만 가져오기 위해 .을 기준으로 나눠주고 나누어진 값들 중 중간에 해당하는 1번 인덱스의 값을 가져왔습니다.

그리고 atob함수를 이용해 base64로 인코딩된 문자열을 디코딩 해주고, JSON.parse함수를 이용해 json문자열을 자바스크립트 객체로 변환해 줍니다.

그리고 드디어 변환 된 값에서 user_id에 해당하는 부분을 가져오면 제가 원하던 user의 pk값을 얻을 수 있습니다.

설명을 장황하게 써놓긴 했지만, 짜놓기만 하고 아직 적용은 해보지 못했습니다. 다음에 백엔드와 html을 모두 결합하게 되었을 때 제대로 확인해보겠습니다.