토큰값을 받아오지 못하는 문제 (undefined)

Question

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다.로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다.핵심 코드는 다음과 같습니다.서버측 server.jsapp.get('/', loginRequired, (req, res) &#61;> { res.sendFile(__dirname &#43; '/views/index.html'); });login-required.jsconst jwt &#61; require('jsonwebtoken'); const loginRequired &#61; async (req, res, next) &#61;> { // TEST CODE const userToken &#61; req.headers[&#34;authorization&#34;]?.split(' ')[1]; // request 헤더로 부터 authorization bearer 토큰 받음 (공부 필요) console.log(userToken &#43; ' TEST&#61;&#61;&#61;1'); // if(userToken) { <&#61; 이 코드로 실행시 무한로딩 // next(); // } next() // undefined, 실제토큰 순으로 콘솔에 찍힘 } module.exports &#61; loginRequired;프론트측 test.jsconst userToken &#61; localStorage.getItem('token'); if (userToken) { const headers &#61; { authorization: &#96;Bearer ${userToken}&#96;, }; axios.get('/', { headers, withCredentials: true }) .then(response &#61;> { // console.log(response.data); }) .catch(error &#61;> { console.error(error); }); } else { // 토큰 값이 없을때 구현해야 하는 로직 }login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (&#43; index.html은 test.js를 연결하고 있습니다.)분석해본 결과 네트워크 요청헤더에서 확인한 결과 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러오고 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o)여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 드는데, 순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다.결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다.즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까?그렇다면 서버에서 처리를 해야하는가? 배워가는 학생으로 많이 부족하다고 생각합니다,,선배님들의 견해를 받고 싶어 게시물 올립니다..!

캐티 · Answer

console.log(req.headers) 이렇게 받은 헤더를 검사하고 autorization 헤더가 없다면 curl -v -H 'Autorization: Bearer test' http://localhost/test-token.htm을 실행해볼 수 있어요. 웹브라우저에서 보낼 수도 있지만 자꾸 favicon.ico를 읽으려는 경향이 있어서 디버깅에 주의집중을 방해하지 않더나요.

토큰값을 받아오지 못하는 문제 (undefined)

1개의 답변

Q&A 목록