회원가입 로그인 관련 질문 드립니다.

Question

강사님 안녕하세요 회원 가입까지는 잘 됐는데 (회원가입 시도한 리스트를 Mysql DB를 통해 확인했습니다!)   로컬스토리지에 저장된 토큰을 postman을 통해 확인해보니 토큰도 유효한데 왜 로그인이 되지 않는지 모르겠습니다..ㅠㅠ   확인 부탁드립니다 감사합니다!

Jay · Answer

포스트맨으로 테스트 하고 계신 API는 GET /jwt이네요.   반면 axios 요청은 POST /sign-in 입니다.   확인해볼 포인트는 두가지 정도 생각이 나네요.   1. 현재 코드에서 input 태그의 userID와 password가 잘 들어오고 있는지 확인하고, signInReturn 자체를 콘솔에 찍어보기 (API 요청 자체가 유효한지 확인하는 행위입니다.)   2. 서버측에 POST /sign-in uri가 등록되어 있는지 확인하기   위 두가지 조치를 해보시면 좋을 것 같습니다.   감사합니다.

김지민 · Answer

signin.js 파일 코드 첨부드립니다!   /* // 로그인 API 연동과정 1. #signin button 클릭 2. #userID, #password 값 확인 (두 값이 모두 입력되어 있지 않으면 return alert) 3. 위 값을 만족하면 로그인 API 요청 4. 요청이 성공적이지 않다면, alert message 5. 요청이 성공하면, jwt를 localstorage에 저장하고 main page로 이동 */ let url = "http://127.0.0.1:3000" ; const btnSignIn = document . querySelector ( "#signin" ); // 1. #signin 클릭 btnSignIn . addEventListener ( "click" , signIn ); async function signIn ( event ) { const userID = document . querySelector ( "#userID" ). value ; const password = document . querySelector ( "#password" ). value ; // 2. #userID, #password 값 확인 (두 값이 모두 입력되어 있지 않으면 return alert) if ( ! userID || ! password ) { return alert ( "올바른 회원정보를 입력해주세요." ); } // 3. 위 값을 만족하면 로그인 API 요청 const signInReturn = await axios ({ method : "post" , // http method url : url + "/sign-in" , headers : {}, // packet header data : { userID : userID , passoword : password , }, // packet body }); // 4. 요청이 성공적이지 않다면, alert message (axios에서 전달받은 code가 200번인가?) const isValidSignIn = signInReturn . data . code == 200 ; if ( ! isValidSignIn ) { return alert ( "요청에 문제가 생겼습니다." ); } // 5. 요청에 성공하면, jwt를 localstorage에 저장하고 main page 이동 const jwt = signInReturn . data . result . jwt ; localStorage . setItem ( "x-access-token" , jwt ); alert ( signInReturn . data . message ); return location . replace ( "./index.html" ); }

Jay · Answer

안녕하세요.   API는 정상적인데 클라이언트 레벨에서 걸리는 것을 보면, 아마 저기 alert 으로 예외처리 걸어둔 부분의 코드에서 문제가 생겼을 가능성이 가장 크겠죠. 지금 이렇게만 봐서는 정확한 파악이 어렵고 관련 코드를 확인해봐야 알 수 있을 것 같습니다. 코드 첨부해주시면 같이 확인해볼게요!