Node.js / 세션(Session)

세션

사용자가 인증에 성공한 상태

세션 기반 인증(Session-based authentication)

사용자가 인증에 성공한 상태를 서버에 저장해서 관리하는 방식

실습

세션 기반 인증 흐름을 로그인 기능을 구현해 확인해보는 실습이다.

생성할 파일은 다음과 같다.

생성할 파일은 index.html, style.css, login.js, server.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>로그인 실습</h1>
    <form>
      <label for="user_id">아이디</label>
      <input autocomplete="false" id="user_id" />
      <label for="user_password">비밀번호</label>
      <input id="user_password" type="password" />
      <button id="login_button">로그인</button>
    </form>
    <main>
      <div>유저 이름 : <span id="user_name"></span></div>
      <div>유저 정보 : <span id="user_info"></span></div>
      <button id="logout_button">로그아웃</button>
    </main>
    <!-- axios cdn -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="login.js"></script>
  </body>
</html>

style.css

body {
  padding: 0 20px;
}

label {
  display: inline-block;
  width: 80px;
  text-align: center;
}

form {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  gap: 8px;
  justify-content: start;
}

#login_button {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  width: 80px;
}

main {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  width: 300px;
  display: none;
}

div {
  margin-bottom: 20px;
}

#logout_button {
  width: 100%;
  height: 50px;
}

terminal

npm init -y #새로운 package.json 파일 만들기, 모듈 초기 세팅
npm i express cors cookie-parser express-session 
#express, cors, cookie-parser, express-session 설치

*express-session : express에서의 세션 관리용 미들웨어

세션을 쿠키로 저장하기

server.js

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const session = require('express-session');

const users = [
  {
    user_id: 'test',
    user_password: '1234',
    user_name: '테스트유저',
    user_info: '저는 테스트유저입니다...',
  },
];

const app = express();
app.use(
  cors({
    origin: ['http://127.0.0.1:5500', 'http://localhost:5500'],
    methods: ['POST', 'GET', 'DELETE', 'OPTIONS'],
    credentials: true, // 쿠키 저장을 위해 필요
  }),
);

app.use(cookieParser());
app.use(express.json());
app.use(
  session({
    // 암호화를 위해 설정하는 비밀 코드
    secret: 'session secret',
    resave: false, // request가 될 때마다 세션 데이터를 항상 다시 저장할지 여부 (변경이 없어도)
    // 초기화되지 않은 세션을 저장할지 여부 (세션에 아무 내용이 없어도 저장할지)
    saveUninitialized: false,
    name: 'session_id',
  }),
);

// 렌더링
app.post('/', (req, res) => {
  console.log(req.body);
});

app.listen(3000, () => console.log('서버 실행'));

// 여기에 클라이언트 코드를 작성하세요.
const form = document.querySelector('form');
const idInput = document.querySelector('#user_id');
const passwordInput = document.querySelector('#user_password');
const loginBtn = document.querySelector('#login_button');

// 쿠키 관리를 위해서 필수
axios.defaults.withCredentials = true;

// 폼 전송 시 페이지를 새로고침하면서 서버로 전송되는 동작을 막는 역할
form.addEventListener('submit', (e) => e.preventDefault());

function login() {
  const userId = idInput.value;
  const userPassword = passwordInput.value;
  return axios.post('http://localhost:3000', { userId, userPassword });
}

loginBtn.onclick = login;

일단 이렇게하면 로그인 버튼을 눌렀을 때 login.js에서 전송한 request의 body를 콘솔에 출력해 id와 password를 콘솔로 확인해볼 수 있다.

여기서 이제 쿠키로 저장하려면 server.js의 렌더링 부분에 받아온 req.body를 기반으로 세션을 저장해 전달해주면 된다.

// 라우팅
app.post('/', (req, res) => {
  const { userId, userPassword } = req.body;

  // 로그인 성공 여부를 userInfo에 담음
  const userInfo = users.find(
    (el) => el.user_id === userId && el.user_password === userPassword,
  );

  if (!userInfo) {
    res.status(401).send('로그인 실패');
  } else {
    // 쿠키를 따로 전달할 필요 없이 express-session에서 알아서 다 해줌...
    req.session.userId = userInfo.user_id;
    res.send('세션 생성 완료');
  }
});

이전에는 쿠키를 보낼 때 res.cookie('test-cookie', 'my cookie'); 이런식으로 보내곤 했는데, 이는 express-session에서 기본 설정은 다 처리해주기 때문에 따로 해줄 필요가 없어졌다!

쿠키 가져오기

function getUserInfo() {
  return axios.get('http://localhost:3000');
}

loginBtn.onclick = () => {
  login().then(() => getUserInfo());
};

이제 쿠키 정보를 요청해 세션 id를 확인해 일치하면 데이터를 전달 받도록 get 요청을 추가했다.

server.js

app.get('/', (req, res) => {
  console.log(req.session);
});

일단은 지금 req.session으로 세션값이 어떻게 들어오고 있는지 확인해보면

뭔가 값이 들어오고는 있는데.... 정작 가져오고 싶은 아이디 값이 안보인다...

왜냐하면 지금 live server 익스텐션으로 구동중이라 주소 값이 http://127.0.0.1:5500/~~인 상태인데,

지금 들어온 쿠키를 확인해보면

Domain이 localhost임을 알 수 있다.

물론 전 글에서 언급했듯이 http://127.0.0.1:5500/~~랑 http://localhost:5500/ 는 결과적으로는 같은 주소를 가리키지만,

도메인 일치 문제로 쿠키 공유가 지금처럼 깨질 수 있다.

때문에 기존 주소의 127.0.0.1을 localhost로 바꿔서 실습해보는 것이 좋다.....

이제 도메인과 주소가 일치하고

console.log(req.session)에서도 이제 userId값이 출력되는 것을 확인할 수 있다!

이제 값이 잘 들어오는 것을 확인했으니 브라우저에서도 받아온 값을 렌더링하려고한다.

server.js

app.get('/', (req, res) => {
  const userInfo = users.find((el) => el.user_id === req.session.userId);
  return res.json(userInfo);
});

// 기존 html에서 안가져온 요소들을 추가로 가져옴
const main = document.querySelector('main')
const userName = document.querySelector('#user_name')
const userInfo = document.querySelector('#user_info')
const logoutButton = document.querySelector('#logout_button')
// 생략...

// 렌더링 기능 
function renderUserInfo(user) {
  main.style.display = 'block';
  form.style.display = 'none';
  userName.textContent = user.user_name;
  userInfo.textContent = user.user_info;
}

loginBtn.onclick = () => {
  login()
    .then(() => getUserInfo())
    .then((res) => renderUserInfo(res.data));
};

주소를 localhost로 바꿔주는 것을 잊지말기.......ㅠㅠㅠ 그래야 값을 잘 가져와서 렌더링을 할 수 있다..

로그아웃 기능

server.js

app.delete('/', (req, res) => {
  // 세션을 정보를 없애주는 메소드
  req.session.destroy();
  // 쿠키도 삭제해주기
  res.clearCookie('session_id');
  res.send('세션 삭제 완료');
});

function logout() {
  return axios.delete('http://localhost:3000');
}

// 로그아웃 후 다시 초기 로그인 폼을 띄워주는 함수
function renderLoginForm() {
  main.style.display = 'none';
  form.style.display = 'grid';
  userName.textContent = '';
  userInfo.textContent = '';
}

logoutBtn.onclick = () => {
  logout().then((res) => {
    console.log(res);
    renderLoginForm();
  });
};

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

Node.js / 토큰(Token) (0)	2025.05.15
Node.js / 쿠키(Cookie) (0)	2025.05.14
Node.js / 네트워크 기초 (0)	2025.05.12

hykim

Node.js / 세션(Session)

세션

세션 기반 인증(Session-based authentication)

실습

세션을 쿠키로 저장하기

쿠키 가져오기

로그아웃 기능

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

티스토리툴바

Node.js / 세션(Session)

세션

세션 기반 인증(Session-based authentication)

실습

세션을 쿠키로 저장하기

쿠키 가져오기

로그아웃 기능

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

'Node.js' Related Articles

티스토리툴바