내일배움캠프 실시간 세탁 서비스 프로젝트 정리 (2) 로그인

JWT로 사용자 인증 기능 만들기

마이 페이지, 세탁물 신청, 조회 등 로그인 상태에서만 이용 가능한 페이지가 있다. 사용자 인증 기능을 구현하는 방법은 여러 가지가 있는데, 이번 프로젝트에서는 강의에서 배운 JWT를 사용했다.

const token = jwt.sign({ id: user.userId }, secretKey, option);

res.cookie("x_auth", token, {
  httpOnly: true,
  maxAge: 0.5 * 60 * 60 * 1000,
});

jwt 모듈을 설치한 후 불러와서 jwt.sign으로 토큰을 발급해준다. (jwt.sign(json 데이터, secretKey, option)

이때 secretKey가 필요한데 config 폴더 안에 secretKey.js 파일로 다음과 같이 secretkey와 option을 저장한다.

module.exports = {
  secretKey: "원하는 시크릿 키",
  option: {
    algorithm: "HS256", // 해싱 알고리즘
    expiresIn: "30m", // 토큰 유효 기간
    issuer: "issuer", // 발행자
  },
};

res.cookie("x_auth", token, {
  httpOnly: true,
  maxAge: 0.5 * 60 * 60 * 1000,
});

다시 token을 발행하는 코드로 돌아와서 token 발행 후 쿠키를 발행할 때 이 값을 넣어준다. 쿠키 지속 시간(maxAge)로 설정했다.

로그인 기능을 구현했으면 특정 페이지에서 로그인 여부를 확인할 수 있도록 사용자 인증 미들웨어도 따로 만들어준다.

app.use(cookieParser());

module.exports = (req, res, next) => {
  const { cookie } = req.headers;

  if (!cookie) {
    res.status(401).send({
      errorMessage: "로그인 후 이용해 주세요.",
    });
    return;
  }
  const [authType, authToken] = cookie.split("=");
  if (!authToken || authType !== "x_auth") {
    res.status(402).send({
      errorMessage: "로그인 후 이용해 주세요.",
    });
    return;

cookieParser 모듈을 불러온 다음 cookie를 req.headers에 담아준다.

쿠키가 없으면 로그인 후 이용해달라는 에러 메시지를 보낸다.

try {
  const { id } = jwt.verify(cookie, secretKey);
  User.findByPk(id).then((user) => {
    res.locals.user = user;
    // console.log(res.locals.user)
    next();
  });
} catch (err) {
  res.status(401).send({
    errorMessage: "이미 로그인이 되어 있습니다.",
  });
}

사장님과 손님을 구분하기 위해 jwt.verify로 검증한다.
사장님과 손님의 secretKey를 다르게 해서 구분하도록 만들었다.

로그아웃 기능

로그아웃은 쿠키를 삭제하는 메서드(clearCookie())를 사용해준다.

  logoutUser = async (req, res, next) => {
    res.clearCookie("x_auth");
    return res.status(200).send({ message: "로그아웃 완료" });
  };

로그아웃 버튼 클릭 시에 쿠키를 삭제하는 api를 ajax로 불러온다.

function logoutUser() {
        $.ajax({
          method: "POST",
          url: "/api/user/logout",
          data: {},
          success: function (response) {
            alert("로그아웃 완료!");
            location.href = "/login";
          },
          error: function (error) {
            alert("로그아웃에 실패하였습니다.");
          },
        });
      }

이때 손님과 사장님의 테이블이 달랐고 회원가입과 로그인 경로가 달랐으므로, 둘을 구분하기 위해 회원가입, 로그인, 인증 미들웨어, 로그아웃 API까지 모두 2개씩 만들어줬다.

재로그인 시 마이페이지로 이동

로그인 후 메인 페이지로 돌아가서 다시 로그인을 시도하면 로그인이 된다(?)는 문제가 있었다.

로그인이 된 사용자는 바로 마이 페이지로 이동되는 것이 맞는 것 같아서 다음과 같이 함수를 처리했다.

<script>
      $(document).ready(function () {
        if (document.cookie) {
          alert("이미 로그인이 되어있습니다. 마이페이지로 이동합니다.");
          window.location.replace("/mypage");
        }
      });
</script>

$(document).ready(function () {}은 html이 로드된 이후 바로 함수가 실행되도록 하는 Jquery 메서드다.

쿠키가 있으면 경고창을 띄우고 바로 마이페이지로 이동하도록 했다.