[JavaScript, Node.js] 유튜브 클론 정리 8장 (2) - 비밀번호 수정

머리글

이번 시간에는 유저의 비밀번호를 변경하는 방법에 대해서 알아보자.

비밀번호 변경

앞서 유저의 정보를 변경했던 것과 크게 차이가 없다.

일단 페이지를 하나 생성해 주자.

extends ../base

block content
    form(method="post")
        input(placeholder="Old Password")
        input(placeholder="New Password")
        input(placeholder="New Password Confirmation")
        input(value="Change Password", type="submit")

그리고 라우터도 만들어주자.

...
userRouter
  .route("/change-password")
  .all(protectorMiddleware)
  .get(getChangePassword)
  .post(postChangePassword);
...

앞서 만들었던 미들웨어도 적용을 해줬다.
비밀번호 변경의 경우 로그인 한 사용자만 접근이 가능해야 한다.

비밀번호 변경의 경우 앞서했던 유저의 프로필 변경과 크게 차이가 없지만
우리가 비밀번호를 bcrypt를 통해 암호화해서 저장했으므로 이를 비교해주어야 한다.

따라서 정보를 비교하는 과정에서 bcrypt의 compare 기능을 이용한다.

export const postChangePassword = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { oldPassword, newPassword, newPasswordConfirmation },
  } = req;
  const user = await User.findById(_id);
  const ok = await bcrypt.compare(oldPassword, user.password);
...

이런 식으로 사용하게 되면
입력받은 암호와 기존에 암호화되어 있던 암호를 비교해서 ok 값에 boolean을 리턴한다.

만약 기존 비밀번호가 틀리다면 이를 알려주는 에러메시지도 출력해 주자.

...
if (!ok) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The current password is incorrect",
    });
  }
...

그리고 새로 입력한 비밀번호와 비밀번호 확인이 다르다면 이도 알려주는 메시지를 출력해 주자.

...
 if (newPassword !== newPasswordConfirmation) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The password does not match the confirmation",
    });
  }
...

이런 식으로 하면 에러 케이스에 대해 처리가 완료되었다.

이제 최종적으로 비밀번호를 변경해 주자.

...
user.password = newPassword;
  await user.save();
  return res.redirect("/users/logout");

유저의 패스워드를 새로 바꾼 패스워드의 값으로 바꿔주고 이를 저장해 준다.

이렇게 하면 비밀번호 변경이 완료되었다.

마무리

이번 시간에는 비밀번호를 변경하는 방법에 대해 알아보았다.

다음 시간에는 파일을 업로드하는 방법을 알아보자.