node.js와 mongoDB를 이용해서 간단한 홈페이지를 만들고 있던 도중, 로그인 상태를 확인하기 위해 한참을 고민한 끝에 미들웨어를 이용해 해결했다.
그런데,
controllers/user.js
/* 생략 */
} else if (await bcrypt.compare(userpw, user.userpw)) {
req.session.user = {
userid: userid,
username: user.username
}
res.render('main', {
userid: req.session.user.userid,
username: req.session.user.username,
isLogin: true
});
}
/* 생략 */middleware/loginCheck.js
function loginCheck(req, res, next) {
if (req.session.user) {
next();
} else {
res.render("main", { isLogin: false });
}
}
module.exports = { loginCheck }routes/index.js
/* 생략 */
router.get('/', loginCheck, function(req, res) {
res.render('main');
});
/* 생략 */이렇게 코드를 작성하고 로그인을 해보면 메인화면은 잘 변경되서 나오지만 두가지 문제가 발생한다.
첫번째로는, 주소창이
localhost:3000/ ➡️ 다음과 같이 나와야하는 주소창이
localhost:3000/signin/signin ➡️ 이렇게 나오는 것이다.
두번째는, 로그인이 되어있는 상태에서 로고 (onclick="location.href='/'")를 누를 경우 isLogin 및 모든 정보가 undifined 되며 아무 정보를 받아오지 못하는 것이다.
코드가 실행되는 순서대로 다시 자세히 살펴보니
로그인할 시 정보는 잘 넘어가지만, 로고의 클릭 이벤트 자체는 / 이 루트 주소로 되어 있기 때문에
routes/index.js
/* 생략 */
router.get('/', loginCheck, function(req, res) {
res.render('main', {
userid: req.session.user.userid,
username: req.session.user.username,
isLogin: true
});
});
/* 생략 */로그인 컨트롤러와 마찬가지로 기본 상태에도 세션에 대한 정보 및 로그인 정보를 넣어야 하는 것이였다!
여기다 로그인 상태를 넣어도 상관없는 이유는 loginCheck라는 미들웨어에서 검사를 해주기 때문에 로그인이 되어있는 상태에서 로고를 몇 번이고 눌러도 isLogin은 false라는 값만 내보낸 채 로그인이 되지 않았다고 인식한다.
===> 미들웨어의 중요성!!!
