[node.js] Session으로 로그인 구현하기

📌 session 

: 서버의 쿠키 

session

 

📍 HTTP Session 이란?

• 브라우저가 아닌 서버에 저장되는 쿠키
• 사용자가 서버에 접속한 시점부터 연결을 끝내는 시점을 하나의 상태로 보고 유지하는 기능을 함 -> 로그인 유지
• 서버는 각 사용자에 대한 세션을 발행하고 서버로 접근(request)한 사용자를 식별하는 도구로 사용
• 쿠키와 달리 저장 데이터에 제한 없음
• 만료 기간 설정이 가능하지만, 브라우저가 종료되면 바로 삭제 

 

📍HTTP Session의 동작 방식 

• 사용자가 최초로 서버 연결을 하면 하나의 session-id(임의의 긴 문자열)가 발행
• 발행 된 session-id는 서버와 브라우저의 메모리에 쿠키 형태로 저장됨
• 서버는 사용자가 서버에 접근 시, 쿠키에 저장된 session-id를 통해 사용자를 구분하고 요청에 대한 응답을 함

 

✔️ Cookie vs Session

• 하는 역할은 비슷 
• 쿠키 : 로컬에 저장되므로 보안 이슈 발생 가능 
• 세션 : 로컬에 session-id만 저장하고, 데이터는 서버에서 처리하므로 보안이 더 좋음 
• 단, 쿠키는 데이터를 바로 저장하고 있으므로 속도가 빠름
• 세션은 쿠키에서 session-id를 읽어서 서버에서 데이터를 받아야 하므로 속도는 더 느림

 

📌 Session으로 로그인 구현하기

📍session 모듈 설치

npm i express-session -s

 

 

📍session 모듈 추가 및 미들웨어 연결 

const session = require('express-session')
const app = express();
app.use(
  session({
    secret: 'bay',
    resave: false,
    saveUninitialized: true,
    cookie: {
      maxAge: 1000 * 60 * 60,
    },
  })
);

 

📍 session 모듈 옵션 설명

• secret: 세션을 발급할 때 사용되는 키 값(아무거나 입력 가능)
• resave: 모든 request마다 기존에 있던 session에 아무런 변경사항이 없어도 session을 다시 저장하는 옵션
• saveUninitialized: 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정 
• secure: https 에서만 세션을 주고 받을 수 있음(http에서는 세션 주고받는 것 불가능)
• cookie: 세션 쿠키 설정 (세션 관리시 클라이언트에 보내는 쿠키)
  • maxAge: 쿠키의 생명 기간, 단위는 ms
  • httpOnly: 자바스크립트를 통해 세션을 사용할 수 없도록 강제

 

✅ 회원 가입 페이지

register.ejs/ register.js 생성

// register.js
// 회원가입 기능 모듈화

const express = require('express');
const mongoClient = require('./mongo');
const router = express.Router();

router.get('/', (req, res) => {
  res.render('register');
});

module.exports = router;

 

📍 서버에 라우터 등록

const registerRouter = require('./routes/register');
app.use('/register', registerRouter);

 

📍 register.ejs에서 데이터 받기 

• post 방식/ register 주소로 회원 가입 요청하므로
• 'users'라는 collection 만들어서 회원 데이터 관리
• req.body에 담겨있는 id가 db에 존재하는지 확인 후 존재할 경우 id 중복 안내
  • 회원 가입 페이지로 이동 안내 
• id가 중복되지 않을 경우, db에 새로운 회원을 등록하고 회원 가입 성공 메시지 출력
  • 로그인 페이지로 이동 안내 

router.post('/', async (req, res) => {
  const client = await mongoClient.connect();
  const userCursor = client.db('db명').collection('users');
  const duplicated = await userCursor.findOne({
    id: req.body.id,
  });
  if (duplicated === null) {
    const result = await userCursor.insertOne({
      id: req.body.id,
      password: req.body.password,
    });
    if (result.acknowledged) {
      res.send('회원 가입 성공!<br><a href="/login">로그인 페이지로 이동</a>');
    } else {
      res.status(404);
      res.send(
        '회원 가입 문제 발생.<br><a href="/register">회원가입 페이지로 이동</a>'
      );
    }
  } else {
    res.status(404);
    res.send(
      '중복된 id 가 존재합니다.<br><a href="/register">회원가입 페이지로 이동</a>'
    );
  }
});

 

✅ 로그인 페이지 

login.ejs/ login.js 생성

// login.js
// 로그인 기능 모듈화

const express = require('express');
const mongoClient = require('./mongo');
const router = express.Router();

router.get('/', async (req, res) => {
  res.render('login');
});

module.exports = router;

 

서버에 라우터 등록

const loginRouter = require('./routes/login');
app.use('/login', loginRouter);

 

✔️ 로그인 처리

• post 방식/ login 주소로 로그인 요청하므로
• req.body에 담겨있는 id가 db에 존재하는지 확인 후 존재하지 않을 경우 해당 id가 없다고 안내 
  • 로그인 페이지, 메인 페이지로 이동 안내 
• id가 있을 경우, id와 비밀번호까지 일치하는지 확인하고 둘 다 일치하는 경우 로그인 성공
  • req.session을 사용하여 로그인 여부/ 로그인 된 id를 session에 저장
  • 게시판 서비스로 이동
• 비밀번호가 틀리면 비밀 번호 불일치 안내
  • 로그인 페이지로 이동 안내 

router.post('/', async (req, res) => {
  const client = await mongoClient.connect();
  const userCursor = client.db('db명').collection('users');
  const idResult = await userCursor.findOne({
    id: req.body.id,
  });
  if (idResult !== null) {
    const result = await userCursor.findOne({
      id: req.body.id,
      password: req.body.password,
    });
    if (result !== null) {
      req.session.login = true;
      req.session.userId = req.body.id;
      res.redirect('/board');
    } else {
      res.status(404);
      res.send(
        '비밀번호가 틀렸습니다.<br><a href="/login">로그인 페이지로 이동</a>'
      );
    }
  } else {
    res.status(404);
    res.send(
      '해당 id 가 없습니다.<br><a href="/login">로그인 페이지로 이동</a>'
    );
  }
});

 

✔️ 로그아웃 처리

• 로그 아웃 버튼 만들기
  • board.ejs 파일에 로그아웃 버튼 추가
  • get방식 /login/logout 주소로 로그아웃 요청 

<div class="board_write">
  <span>현재 등록 글 : &nbsp; <%= articleCounts %></span>
  <a class="btn red" href="/board/write">글쓰기</a>
  <a class="btn orange" href="/login/logout">로그아웃</a>
</div>

로그아웃 요청이 들어오면 생성된 req.session을 삭제 처리 -> 최초 화면으로 이동 

router.get('/logout', async (req, res) => {
  req.session.destroy((err) => {
    res.redirect('/');
  });
});

 

✔️ 로그인 여부에 따른 게시판 서비스 변경

• 로그인이 안되어 있으면 게시판에 접속이 불가능 하도록 수정
• req.session은 어느 라우터에서나 불러서 쓸 수 있음
• req.session.login의 값을 확인해서 게시판 서비스로 이동 할지, 로그인 페이지로 이동 안내할지 결정
• board.ejs 파일에 req.session.id에 저장된 회원 id 정보도 같이 전달

router.get('/', async (req, res) => {
  if (req.session.login) {
    const client = await mongoClient.connect();
    const cursor = client.db('db명').collection('board');
    const ARTICLE = await cursor.find({}).toArray();
    
    const articleLen = ARTICLE.length;
    res.render('board', {
      ARTICLE,
      articleCounts: articleLen,
      userId: req.session.userId,
    });
  } else {
    res.status(404);
    res.send('로그인 해주세요.<br><a href="/login">로그인 페이지로 이동</a>');
  }
});

 

🔍 로그인 확인용 함수 이용 

• 미들웨어의 2번째 매개 변수로 로그인 확인용 함수를 넣어서 처리하는 방법
• 로그인 여부를 req.session 값을 통해 판별하고, 로그인이 되어 있으면 next()를 이용해 뒤의 익명 함수를 수행하는 구조
• if문을 적게 사용하고 편리하게 사용 가능

function isLogin(req, res, next) {
  if (req.session.login) {
    next();
  } else {
    res.send('로그인 해주세요.<br><a href="/login">로그인 페이지로 이동</a>');
  }
}

router.get('/', isLogin, async (req, res) => {  
  const client = await mongoClient.connect();
  const cursor = client.db('kdt1').collection('board');
  const ARTICLE = await cursor.find({}).toArray();
  
  const articleLen = ARTICLE.length;
  res.render('board', {
    ARTICLE,
    articleCounts: articleLen,
    userId: req.session.userId,
  });  
});

 

✔️ 게시글에 작성자 id 정보 추가

• 각각의 게시글의 작성자가 누구인지 알려주는 기능 추가
• 자신이 작성한 글은 수정 및 삭제 버튼이 보이도록 기능 추가
• 위의 기능 추가를 위해서는 게시글 db에 작성자의 id 정보 있어야함

 

📍board.ejs 파일 수정

제목 위에 작성자의 id를 보여주는 부분 추가

<li>
   <div class="author">
       작성자 : <%= ARTICLE[i].id %>
   </div>
   <div class="title">
       <%= ARTICLE[i].title %>
   </div>

 

📍자신이 작성한 글에만 수정 삭제 버튼 표시

게시글의 작성자 id와 로그인한 유저의 id를 비교해서 수정 및 삭제 버튼 표시

<div class="foot">
    <% if (ARTICLE[i].id === userId) { %>
    <a class="btn orange" href="board/modify/<%= ARTICLE[i].title %>">수정</a>
    <a class="btn blue" href="#" onclick="deleteArticle('<%= ARTICLE[i].title %>')">삭제</a>
    <% } %>
</div>

 

✔️ 게시글 추가(수정, 삭제) 기능 수정

로그인 상태가 아니면 해당 페이지로 이동이 안되도록 설정

router.get('/write', isLogin, (req, res) => {
  res.render('board_write');
});

 

글을 추가 할 때도 로그인 여부 판별 

새로운 게시글을 추가할 때, title, content 이외에 id 값으로 로그인한 유저의 id값을 받아서 글을 추가 

router.post('/', isLogin, async (req, res) => {
  if (req.body) {
    if (req.body.title && req.body.content) {
      const newArticle = {
        id: req.session.userId,
        title: req.body.title,
        content: req.body.content,
      };