[Node.js] 서버에서 받은 데이터에 따라 프런트 동작 처리하기

[Node.js] fetch를 이용해 프런트의 정보를 서버로 보내기

·이전 글에서 home.ctrl.js 파일에서 login 프로세스가 있을 때 단순히 console.log에 띄우는 작업만 하던 것을 id와 pw를 비교하는 과정으로 변경

 

1) 임의의 id와 pw리스트 지정하고 프런트에서 받은 id, pw와 비교

// home.ctrl.js

// 원래는 controller에 id와 pw 리스트가 있으면 절대 안되지만 연습용으로 controller에 작성
const users = { // 각 사용자의 id와 pw를 리스트로 만들어서 같은 번지에 부여
    id: ["사용자1", "사용자2", "사용자3"],
    pw: ["1234", "3456", "5678"]
};

// login process 작성
const process = {
  login: (req, res) => {
    const id = req.body.id,                         // login.js에서 fetch 안에서 body로 받은 id와 pw를 각각 id와 pw 변수로 받기
           pw = req. body.pw
    if (users.id.includes(id)) {                     // 만약 위에서 임의로 작성한 id 리스트에 프런트에서 받은 id가 존재한다면
      const idx = users.id.indexOf(id);         // 그 id의 인덱스를 idx 변수로 받기
      if (users.pw[idx] === pw){               // 그리고 pw 리스트의 같은 인덱스에 있는 pw와 프런트에서 받은 pw 비교하여 같으면
        return res.json({                            // json 형태로 success: true 전달
          success: true,
        });
      }
    }
    return res.json({                               // 만약 위에서 실패하여 success: true를 return하지 못했다면
      success: false,                                // success: false와 msg: "로그인에 실패하셨습니다."를 json 형식으로 return
      msg: "로그인에 실패하셨습니다.",
    });
  },
};

 

2) login.js에서 success가 true인지 false인지에 따라 응답할 행동 지정

// login.js

function login() {
    const req = {
        id: id.value,
        pw: pw.value,
    };

    fetch("/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req)
    })
    
//////////////////// 여기까지는 동일 ///////////////////////
 
        .then((res) => res.json())
        .then((res) => {
            if (res.success) {                  // res.success가 true이면
                location.href = "/"            // "/" 경로로 이동
            } else{
                alert(res.msg);                // res.success가 false이면 res에 있는 msg를 경고창으로 띄움
            }
        })
        .catch((err) => {                    // 로그인 중 에러 발생 시 console에 에러 표시
            console.error(new Error("로그인 중 에러 발생"));
        });
}

 

3) 확인

  -로그인 실패 시

 -로그인 실패 경고창

 

 

 -로그인 성공 시

 -코드에서 지정한대로 루트 경로로 이동