포시코딩

Node.js, MongoDB 로 웹서비스 만들기 - 13. 로그인(2) 본문

Node.js

Node.js, MongoDB 로 웹서비스 만들기 - 13. 로그인(2)

포시 2022. 6. 27. 14:44
728x90

이전 글에서 로그인 기능을 완성했다면 

로그인 후 세션에 유저정보가 잘 저장되어 있는지 확인하는 시간을 가져보자

마이페이지 대충 만들어서 들어가면 유저아이디 나오나 확인할거임

 

mypage.ejs 를 만들자

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NFP</title>
</head>
<body>
    <h4>님의 마이페이지입니다.</h4>
</body>
</html>

member.js 로 와서 mypage 로 가는 라우팅을 해주자

router.get('/mypage', loginCheck, (req, res)=>{
    res.render('mypage.ejs', {userSession: req.user});
})

평소에 만들던 라우터와 살짝 다른걸 볼 수 있는데 

{userSession: req.user} 는 userSession 이라는 이름으로 세션에 담긴 유저정보를 보낸다는 의미이고

'/mypage' 옆 loginCheck 는 마이페이지로 가기전 로그인된 상태인가를 체크하는 미들웨어다. 

미들웨어는 요청을 받고 응답을 보내는 그 중간에서 실행되는 함수들을 의미함 

 

loginCheck 미들웨어를 만들어보자

function loginCheck(req, res, next){
    if(req.user){
        next()
    } else {
        res.send('로그인안하셨는데요? <a href=\"/member/login\">로그인</a>');
    }
}

세션에 유저정보가 있으면 그냥 지나가게 놔두고 

없다면 당장은 중요하지 않으니 간단하게 로그인 해야된다는 글귀가 나오게 작성했다. 

 

이제 /mypage 로 갈 때 세션정보가 전달되게 됐으니 아이디가 나오게 수정해주자

<h4><%= userSession.id %> 님의 마이페이지입니다.</h4>

이게 html 대신 ejs 쓰는 이유임

전달한 js 값을 위처럼 사용해서 출력이 가능하다. 

 

저장 후 테스트해보면 아이디가 잘 나오는걸 확인할 수 있다. 

 

 

 

 

https://4sii.tistory.com/35

 

Node.js, MongoDB 로 웹서비스 만들기 - 14. 메뉴(navbar)

지금껏 로그인하거나 마이페이지를 가거나 할 때 직접 url 에 입력해서 이동하거나 간단하게 버튼을 급조해 사용했는데 navbar 를 만들어보자 NFP 임시 로그인 bootstrap 을 이용해 간단하게 구현했

4sii.tistory.com

728x90
저작자표시 (새창열림)

'Node.js' 카테고리의 다른 글

Node+Express 서버와 Vue 연동하기  (0) 2022.10.06
Node.js, MongoDB 로 웹서비스 만들기 - 14. 메뉴(navbar)  (0) 2022.06.27
Node.js, MongoDB 로 웹서비스 만들기 - 12. 로그인(1) - passport  (0) 2022.06.27
Node.js, MongoDB 로 웹서비스 만들기 - 11. 회원가입, 로그인 - bcrypt  (0) 2022.06.26
Node.js, MongoDB 로 웹서비스 만들기 - 10. 회원가입(2) - bcrypt 암호화  (0) 2022.06.10
'Node.js' Related Articles more