본문 바로가기
Server/Node.js

로그인 기능 만들기 Session (3) - 마이페이지 기능 만들어보기

by kkkkk1023 2023. 9. 6.

해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.

 

1. 유저가 아이디를 로그인하면 서버에서 DB에 해당 id, pw가 있는지 확인한다.
2. 해당 id, pw가 있으면 DB에 세션데이터를 저장한다.
3. 유저 브라우저로 쿠키에 세션 아이디를 담아서 전달한다.
4. 마이페이지 같은 페이지로 이동 요청을 하면 쿠키로 세션 아이디를 DB로 담아서 보낸다.
5. DB에서는 해당 세션 아이디가 세션 데이터에 있는지 확인 후 마이페이지를 띄울지 말지를 응답한다. 

 

이번에는 4, 5번 기능을 만들어보려고 한다. 

 

 

 

1. 마이페이지 페이지 만들고 라우팅 시켜주기.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- <link rel="stylesheet" href="main.css"> -->
  <script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script>
  <title></title>
</head>

<body>

  <!--nav 부분 조립식으로 include하기 -->
  <%- include('nav.html')  %>

  
    <p>~의 마이페이지 입니다.</p>


  <!-- jQeury install -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

  <!-- JavaScript -->
  <!-- <script src="main.js"></script> -->


  <!-- bootstrap install -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>

</body>

</html>

 

//라우팅

app.get('/mypage', function(request, response){
    response.render('mypage.ejs', {});
})

 

위의 코드처럼 라우팅을 할 경우 로그인하지 않은 사용자도 해당 경로로 진입이 가능하다. 따라서 로그인 한  사용자만 마이페이지를 보여줘야 하기 떄문에 2번을 진행해보자.

 

 

 

2. 로그인 한 유저에게만 마이페이지 보여주는 기능 만들기.

app.get('/mypage', checkLogin,function(request, response){
    response.render('mypage.ejs', {});
})

function checkLogin(request, response, next){
    if (request.user){
        next();
    }else {
        response.redirect('/login')
    }
}

 

 

라우팅 코드에 함수를 추가했다.

 

이렇게 함수를 추가하면 마이페이지 요청 후 해당 함수가 진행되고 로그인 한 유저가 맞을 경우 next() 코드를 통해 다음 단계로 넘어가 응답을 하게 된다. 그리고 로그인 하지 않은 유저일 경우 login 페이지로 이동하게 된다.

 

 

자 그럼 checkLogin 함수에서 request.user라는 건 뭘까❓❓❓

 

request.user는 로그인 한 유저의 DB상 정보이다. (아이디, 비밀번호, 유저이름 등등)

하지만 출력해보면 아무것도 출력되지 않는다.

 

 

왜 그럴까 ❓

 

해당 부분의 값은 deserializeUser함수의 실행으로 값이 저장된다. 

해당 함수는 세션 아이디를 바탕으로 유저의 정보를 DB에서 찾아주는 역할을 하는 함수인데 그 기능을 수행하고 결과를 request.user에 저장한다.  (아래 코드 참고)

 

passport.deserializeUser(function (ID, done) {
  db.collection('login').findOne({ id: ID }, function (error, result) {
    done(null, result)
  })
});

 

따라서 누군가 mypage로 요청을 하면 유저가 세션 아이디가 쿠키에 존재한다면 위의 함수로 response.user라는 데이터가 존재하게된다. 

 

 

결론: response.user는 deserializeUser가 보내준 그냥 로그인한 유저의 DB 데이터이다.

 

 

3. 마이페이지 방문 시 유저의 정보 HTML에 삽입하기

 

로그인한 유저 데이터를 mypage.ejs에 데이터 바인딩을 시키면 끝난다.

 

app.get('/mypage', checkLogin,function(request, response){
    response.render('mypage.ejs', {userdata: request.user});
})

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="main.css"> -->
    <script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script>
    <title></title>
</head>

<body>

  <!-- nav 부분 조립식으로 include하기 -->
  <%- include('nav.html') %>

    <p> <%= user.id %>의 마이페이지 입니다.</p>


  <!-- jQeury install -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

  <!-- JavaScript -->
  <!-- <script src="main.js"></script> -->


  <!-- bootstrap install -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>

</body>

</html>

 

저작자표시 비영리

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

ENV  (0) 2023.09.07
회원가입 기능 만들기 - 회원가입 페이지 만들기 + 라우팅 + post  (0) 2023.09.07
로그인 기능 만들기 Session (2) - 아이디 비밀번호 DB와 비교하고 세션 만들어주기  (0) 2023.09.06
로그인 기능 만들기 Session (1) - 로그인 페이지 만들기, 아이디 비밀번호 검사하기  (0) 2023.09.06
Open Authentication(OAuth)  (0) 2023.09.05

관련글

티스토리툴바