반응형
1. 개요
- 회원가입이랑 로그인 기능 구현했으니까
- mypage에 접속할 수 있도록 만들고 싶음
- mypage는 회원 정보를 바탕으로 로그인 한 회원의 개인정보가 담긴 페이지를 보여줌
2. 코드
(1) mypage.ejs
- mypage.ejs파일 만들어줍시다
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<%- include('nav.html') %>
<p><%= 사용자.id %>의 마이페이지입니다</p>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
-->
</body>
</html>
- 적당히 꾸며주시면 됩니다
(2) server.js
// 로그인한 유저의 세션 아이디를 이용해 DB에서 개인정보 찾아주는 코드(개인 정보 페이지 접속시 실행)
// db에서 유저 아이디를 이용해서 유저를 찾고, 유저 정보를 done(null, 결과)에전달해줌
// 참고로 '아이디'라는 변수는 serializeUser코드의 'user.id'변수에 들어있는 값과 동일
passport.deserializeUser(function (아이디, done) {
db.collection("login").findOne({ id: 아이디 }, function (에러, 결과) {
done(null, 결과);
});
});
- deserializeUser 코드는 브라우저에 저장된 세션 아이디를 이용해 DB에서 개인정보를 찾아서 변수에 담아줌
- 결국 deserializeUser 코드는 ‘/mypage’로 요청이 들어오면 요청.user에 개인정보 데이터를 꽂아줌
// 마이페이지 요청 코드
// '로그인했니' 라는 미들웨어 포함하기
app.get("/mypage", 로그인했니, function (요청, 응답) {
console.log(요청.user);
응답.render("mypage.ejs", { 사용자: 요청.user });
});
- get 요청을 통해 서버에 ‘/mypage’ 라는 URL로 요청이 들어오면 mypage를 렌더링 해줌
- 이때 ‘사용자’라는 변수에 미들웨어를 통해 deserializeUser 코드로 찾은 데이터를 담아줌
// 로그인 했는지 알려주는 미들웨어 코드
function 로그인했니(요청, 응답, next) {
// 요청.user가 있는지 검사해줌
// 로그인 후 세션이 있으면 요청.user가 브라우저에 존재 함
if (요청.user) {
// 만약 요청.user가 있으면 통과시킴
next();
} else {
응답.send("로그인안하셨는데욧?");
}
}
- 서버로 GET 요청 들어오면 세션유무를 따져서 로그인 했는지 검사해줌
- 만약 로그인 했으면 GET 코드 마저 실행시켜주고
- 로그인 안했으면 로그인 안했다고 알려줌
반응형
'코딩 > NodeJS' 카테고리의 다른 글
| nodejs랑 mongodb로 검색 기능 만들기 (0) | 2023.01.31 |
|---|---|
| nodejs에서 회원가입 기능 구현하기 (0) | 2023.01.30 |
| nodejs에서 Session-based 회원가입 구현하기 (0) | 2023.01.28 |
| nodejs+express 서버에 게시글 수정 요청하기 (0) | 2023.01.27 |
| nodejs로 mongodb랑 데이터 주고받기 (0) | 2023.01.25 |
