인프런 커뮤니티 질문&답변
작성한 질문수
회원가입 로그인 관련 질문 드립니다.
작성
·
382
답변 3
0
Jiwoon Jeong
지식공유자
포스트맨으로 테스트 하고 계신 API는 GET /jwt이네요.
반면 axios 요청은 POST /sign-in 입니다.
확인해볼 포인트는 두가지 정도 생각이 나네요.
1. 현재 코드에서 input 태그의 userID와 password가 잘 들어오고 있는지 확인하고, signInReturn 자체를 콘솔에 찍어보기
(API 요청 자체가 유효한지 확인하는 행위입니다.)
2. 서버측에 POST /sign-in uri가 등록되어 있는지 확인하기
위 두가지 조치를 해보시면 좋을 것 같습니다.
감사합니다.
0
김지민
질문자
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");
}
0
Jiwoon Jeong
지식공유자
안녕하세요.
API는 정상적인데 클라이언트 레벨에서 걸리는 것을 보면,
아마 저기 alert 으로 예외처리 걸어둔 부분의 코드에서 문제가 생겼을 가능성이 가장 크겠죠.
지금 이렇게만 봐서는 정확한 파악이 어렵고 관련 코드를 확인해봐야 알 수 있을 것 같습니다.
코드 첨부해주시면 같이 확인해볼게요!
siginInReturn의 packet body에 key값 오타를 확인했고 고쳤더니 해결됐습니다!(passoword > password) 답변해주신 내용은 비슷한 오류가 생기면 꼭 확인해서 참고하겠습니다 고퀄 답변 정말 감사드립니다!