개발자

리액트 로그인 jwt 구현중 나타나는 에러

2024년 01월 18일조회 431

제가 jwt를 통해서 로그인을 구현하고 있는데요. 서버에서 jwt토큰을 가져오면 그 토큰을 디코딩해서 사용하고 있습니다. 로그인 코드를 짜놓고 실행을 시키면 저렇게 에러 코드가 나오고 let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); 이부분을 지우면 화면이 잘 나타나게 되고 저상태로 아이디랑 비밀번호를 넣어 로그인 버튼을 누르면 jwt토큰이 잘 들어옵니다. 토큰이 들어온 상태서 다시 let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); 이 코드를 넣으면 작동이 되는데 예외 처리를 해서 작업을 해야하나요??..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

강병진님의 프로필 사진

에러메세지는 .substring()을 호출하는 testGetCK가 undefined라고 나타내고 있습니다. 해당 값을 확인하시면서 디버깅 해보시죠~

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 01월 18일

같이 공유해주신 코드에서는 JWT 토큰을 디코딩하여 사용자 정보를 가져오려고 하는 것으로 보입니다. 하지만, 이 작업은 로그인 후 JWT 토큰을 수신받은 이후에 수행되어야 합니다. 즉, 아래의 코드 조각: ```js let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); ``` 이것은 로그인 버튼을 누르고, 서버에서 JWT 토큰을 받아온 후에 실행되어야 합니다. 하지만 현재 상태에서는 로그인 버튼을 누르기 전에 이미 위의 코드가 실행되려고 하고 있는데, 그 때는 아직 `testGetCK` 가 undefined 여서 에러가 발생하는 것 같습니다. 따라서 제안드리는 해결책은 위의 코드 조각을 토큰 수신 확인 이후에 실행하도록 변경하는 것입니다. 예를 들면, 로그인 요청의 콜백 함수나 프로미스의 `then` 블록 안에 넣어 주세요. 이 경우에만 JWT 토큰이 있는 상황이므로 디코딩 과정에서 문제가 발생하지 않습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!