KDT 5th 웹개발자 입문 수업 30일차

쿠키의 값을 전달

프론트에서 쿠키의 값을 잘라서 쓰기 싫다면 -> 백엔드에서 쿠키의 값을 구하여 프론트에 전달한다.

 

res.cookie(쿠키명, 쿠키값, { 쿠키 옵션 });

res.render() 에 해당 쿠키를 req.cookies.쿠키명으로 접근하여 브라우저에 값을 저장해줄 수 있다.

이때 쿠키 옵션의 httpOnly 를 true로 해주면 프론트에선 접근할 수 없고 백에서만 접근할 수 있는 쿠키가 만들어진다.

(쿠키의 값은 전달이 되는거지만, 쿠키의 값이 보이지는 않는다)

 

쿠키 옵션

1. 쿠키 생존 기간

• expires : new Date() 생성자를 사용하여 시간을 지정
  • ex. expires : new Date(Date.now() + 1000 * 6) -> 6s
• maxAge : 생성된 시간부터 ms 기준의 시간을 지정
  • ex. (1000 * 6) -> 6s

2. httpOnly

• true : 웹 서버에서만 접근 가능
• false : 웹 서버와 브라우저 모두 접근 가능

 

쿠키 삭제하기

res.clearCookie(쿠키명)

 

 

router.get('/cook', (req, res) => {
  res.cookie('alert', true, {
    httpOnly: false,
    maxAge: 1000 * 5,
  });
  res.status(200).json('쿠키 굽기 성공');
});

async function checkField() {
      const result = await fetch('http://localhost:4000/cookie/cook', {
        method: 'get',
        headers: {
          'Content-type': 'application/json'
        },
      });
      console.log(result);
      const msg = await result.json();
      console.log(msg);
    }

fetch로 서버 주소에 method에 따른 요청을 보낸다 -> 해당 요청의 결과를 변수로 받아줘서 사용해준다.

.json() 으로 입력해준 메세지에 접근이 가능

 

 

 

HTTP Session

브라우저가 아닌 서버에 저장되는 쿠키 (Cookie는 로컬에 저장된다!)

사용자가 서버에 접속한 시점부터 연결을 끝내는 시점을 하나의 상태로 보고 유지하는 기능을 한다 -> 이를 사용하여 로그인 유지가 가능하다

서버는 각 사용자에 대한 세션을 발행하고 서버로 접근한 사용자를 식별하는 도구로 사용된다.

쿠키와 달리 서버에 직접 저장되므로 저장 데이터에 제한이 없다.

만료 기간 설정이 가능하지만 브라우저가 종료되면 바로 삭제된다.

 

 

 

HTTP Session 의 동작 방식

사용자가 최초로 서버 연결을 하면 하나의 Session ID가 발행된다.

발행된 Session ID는 서버와 브라우저의 메모리에 쿠키 형태로 저장이 되고,

서버는 사용자가 서버에 접근 시, 쿠키에 저장된 Session ID를 통하여 서버는 사용자를 구분하고 요청에 대한 응답을 한다.

 

Cookie	Session
로컬에 저장	로컬에는 Session ID만 저장 -> 데이터는 서버에서 처리
보안 이슈 존재	보안이 쿠키보다 좋음
데이터를 바로 저장하고 있기에 속도가 빠름	세션은 쿠키에서 Session ID를 읽어서 서버에서 데이터를 받아야 하므로 속도가 느림

 

로그인 테이블 만들기

CREATE TABLE user (
	`ID_PK` INT PRIMARY KEY AUTO_INCREMENT,
    `USERTID` VARCHAR(20) NOT NULL UNIQUE,
    `PASSWORD` VARCHAR(20) NOT NULL,
    `REGISTER_TIME` DATETIME DEFAULT CURRENT_TIMESTAMP,
    `UPDATE_TIME` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

 

세션 모듈 추가

npm i express-session 으로 모듈 설치

// 세션 미들웨어 연결
const session = require('express-session');
const app = express();
app.use(
	session({
  		secret: '',
        resave: false,
        saveUninitialized: true,
        cookie: {
        	maxAge: 1000 * 60 * 60,
        },
    })
);

 

• secret : 세션을 발급할 때 사용되는 키 값 (아무거나 ok)
• resave : 모든 request 마다 기존에 있던 session에 아무런 변경사항 없어도 session을 다시 저장하는 옵션
• saveUninitialized : 세션에 저장할 내역이 없더라고 처음부터 세션을 생성할지 설정
• secure : https 에서만 세션을 주고 받을 수 있게끔 (http 는 x)
• cookie : 세션 쿠키 설정 - httpOnly, maxAge ...

 

const express = require('express');

const router = express.Router();

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

module.exports = router;

 

const connection = require('./dbConnect');

const userDB = {
  // 중복 회원 찾기
  userCheck: (userId, cb) => {
    const checkQuery = `SELECT * FROM mydb.user WHERE USERID = ${userId}`;
    connection.query(checkQuery, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },
};

module.exports = userDB;

 

router.post('/', (req, res) => {
  console.log('!');
  // 중복 회원 찾기
  userController.userCheck(req.body.id, (data) => {
    // console.log(data);

    if (data.length === 0) {
      // 회원가입 진행
      userController.userRegister(req.body, (seconddata) => {
        if (seconddata.affectedRows >= 1) {
          console.log(seconddata, '회원 가입 완료');
          res
            .status(200)
            .send(
              '회원 가입 성공! <br/><br/> <a href="/login">로그인으로 이동</a>'
            );
        } else {
          res
            .status(500)
            .send(
              '회원가입 실패, 알 수 없는 문제가 발생하였습니다. <br/><br/> <a href="/register">회원 가입으로 이동</a>'
            );
        }
      });
    } else {
      res
        .status(400)
        .send(
          '회원가입 실패, 동일한 아이디가 존재합니다. <br/><br/> <a href="/register">회원 가입으로 이동</a>'
        );
    }
  });
});

 

 

로그인 기능

입력 받은 ID와 PASSWORD가 DB에 존재하는지 체크 후

DB에 입력 받은 ID가 존재하면 -> 입력받은 Password와 DB에 있는 회원의 Password가 동일한지 체크하고 로그인처리

비밀번호가 틀리면 로그인 페이지로 이동

 

req.session을 사용하여 로그인 여부와 로그인된 ID를 session에 저장해준다.

outer.post('/', (req, res) => {
  userController.userCheck(req.body.id, (data) => {
    if (data.length === 1) {
      if (data[0].PASSWORD === req.body.password) {
        req.session.login = true;
        req.session.userID = req.body.id;
        res.status(200).redirect('dbBoard');
      } else {
        res
          .status(400)
          .send(
            '비밀번호가 다릅니다. <br/><br/> <a href="/login">로그인 페이지로 이동</a>'
          );
      }
    } else {
      res
        .status(400)
        .send(
          '해당 id가 존재하지 않습니다. <br/><br/> <a href="/register">회원가입 페이지로 이동</a>'
        );
    }
  });
});

 

로그아웃

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

req.session.destroy() 로 로그아웃을 해주면 세션을 없애준다.

 

 

로그인 여부에 따른 상황처리

로그인이 안되어 있으면 게시판에 접속이 불가능하도록 수정

req.session은 어느 라우터든 불러서 사용이 가능하다

req.session.login 값을 확인하여 게시판 서비스로 이동할지, 로그인 페이지 이동을 안내할지 결정해준다.

// 게시판 페이지 호출
router.get('/', (req, res) => {
  if (req.session.login === true) {
    boardDB.getAllArticle((data) => {
      // data 는 하나씩 오는 게 아니라 배열 형태로 오게된다!!!!!
      const ARTICLE = data;
      const articleCounts = ARTICLE.length;
      res.render('db_board', {
        ARTICLE,
        articleCounts,
      });
    });
  } else {
    res
      .status(404)
      .send(
        '로그인이 필요합니다. <br/><br/> <a href="/login">로그인 페이지로 이동</a>'
      );
  }
});