[nodejs] 세션으로 구현한 로그인 기능 라우팅

0. 목차

1. 개요

2. express 라우터로 나누기

3. 미들웨어 나누기

1. 개요

2022.02.08 - [경일/nodejs] - [nodejs] 세션 이용해서 로그인기능 만들기

[nodejs] 세션 이용해서 로그인기능 만들기

2022.02.08 - [경일/nodejs] - [nodejs] express 라우터기능/ 미들웨어 나누기로 파일 쪼개기

[nodejs] express 라우터기능/ 미들웨어 나누기로 파일 쪼개기

위의 두 포스팅에서 각각 세션을 이용한 로그인 기능 구현과,

express 라우터 기능과 미들웨어 분리로 파일을 나눠서 관리하는 방법에 대해 작성했다.

 

이번 글에서는 위의 두개를 짬뽕해서,

세션을 이용한 로그인 기능을 만든 server.js 파일을 

express 라우터 기능과 미들웨어 분리로 파일을 쪼개고 쪼개볼거다.

 

2. express 라우터로 나누기

const express = require('express');
const nunjucks = require('nunjucks');
const { userList } = require('./model/user.js');

const session = {};

const app = express();

app.set('view engine', 'html');
nunjucks.configure('views', { express: app });

app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('index.html', {
      isLogin: true,
      userInfo,
    });
  } else {
    res.render('index.html', { isLogin: false });
  }
});

app.get('/user/login', (req, res) => {
  const msg = req.query.msg;
  res.render('./user/login', { msg });
});

app.post('/user/login', (req, res) => {
  const { userid, userpw } = req.body;

  const [user] = userList.filter((v) => v.id === userid && v.pw === userpw);
  if (user) {
    const privateKey = Math.floor(Math.random() * 1000000000);
    session[privateKey] = user;
    console.log(session);
    res.setHeader('Set-Cookie', `connect.id=${privateKey}; path=/`);
    res.redirect('/');
  } else {
    res.redirect('/user/login?msg=등록되지 않은 사용자 입니다');
  }
});

app.get('/user/profile', (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('./user/profile.html', {
      userInfo,
    });
  } else {
    res.redirect('/user/login?msg=로그인부터 하세요');
  }
});

app.get('/user/logout', (req, res) => {
  if (req.headers.cookie) {
    if (req.headers.cookie) {
      const [, privateKey] = req.headers.cookie.split('=');
      delete session[privateKey];
      res.setHeader('Set-Cookie', 'connect.id=delete; Max-age=0; path=/');
      res.redirect('/');
    } else {
      res.redirect('/user/login?msg=로그인부터 하라니까요?!');
    }
  }
});

app.listen(3000);

내가 짠 전체 코드다.

모든 라우터를 route 디렉토리 내의

user.js 파일로 옮기고 모듈로 가져올거다.

 

const express = require('express');
const nunjucks = require('nunjucks');
const { userList } = require('./model/user.js');
const userRouter = require('./route/user/user.js');

const session = {};

const app = express();

app.set('view engine', 'html');
nunjucks.configure('views', { express: app });

app.use(express.urlencoded({ extended: true }));

app.use('/user', userRouter);

app.get('/', (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('index.html', {
      isLogin: true,
      userInfo,
    });
  } else {
    res.render('index.html', { isLogin: false });
  }
});

app.listen(3000);

server.js

 

const express = require('express');

const router = express.Router();

router.get('/login', (req, res) => {
  const msg = req.query.msg;
  res.render('./user/login', { msg });
});

router.post('/login', (req, res) => {
  const { userid, userpw } = req.body;

  const [user] = userList.filter((v) => v.id === userid && v.pw === userpw);
  if (user) {
    const privateKey = Math.floor(Math.random() * 1000000000);
    session[privateKey] = user;
    console.log(session);
    res.setHeader('Set-Cookie', `connect.id=${privateKey}; path=/`);
    res.redirect('/');
  } else {
    res.redirect('/user/login?msg=등록되지 않은 사용자 입니다');
  }
});

router.get('/profile', (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('./user/profile.html', {
      userInfo,
    });
  } else {
    res.redirect('/user/login?msg=로그인부터 하세요');
  }
});

router.get('/logout', (req, res) => {
  if (req.headers.cookie) {
    if (req.headers.cookie) {
      const [, privateKey] = req.headers.cookie.split('=');
      delete session[privateKey];
      res.setHeader('Set-Cookie', 'connect.id=delete; Max-age=0; path=/');
      res.redirect('/');
    } else {
      res.redirect('/user/login?msg=로그인부터 하라니까요?!');
    }
  }
});

module.exports = router;

user.js

이렇게 하고 실행해보니 에러가 난다.

user.js 에서 userList 가 undefined 라서 참조에러가 발생했다.

그럼 userList를 user.js에서 require해주면 될듯하다.

 

그리고 session 도 읽지못해 에러가 발생할듯한데

session 은 server.js에서도 사용하고있다.

 

session은 session.js 파일을 하나 새로 만들어서

거기다 넣어둔 뒤,

server.js 와 user.js 에서 모두 module로 땡겨오면 될듯하다.

 

const express = require('express');
const nunjucks = require('nunjucks');
const userRouter = require('./route/user/user.js');
const { session } = require('./session');

const app = express();

app.set('view engine', 'html');
nunjucks.configure('views', { express: app });

app.use(express.urlencoded({ extended: true }));

app.use('/user', userRouter);

app.get('/', (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('index.html', {
      isLogin: true,
      userInfo,
    });
  } else {
    res.render('index.html', { isLogin: false });
  }
});

app.listen(3000);

server.js

 

const express = require('express');
const { userList } = require('../../model/user.js');
const { session } = require('../../session');

const router = express.Router();

router.get('/login', (req, res) => {
  const msg = req.query.msg;
  res.render('./user/login', { msg });
});

router.post('/login', (req, res) => {
  const { userid, userpw } = req.body;

  const [user] = userList.filter((v) => v.id === userid && v.pw === userpw);
  if (user) {
    const privateKey = Math.floor(Math.random() * 1000000000);
    session[privateKey] = user;
    console.log(session);
    res.setHeader('Set-Cookie', `connect.id=${privateKey}; path=/`);
    res.redirect('/');
  } else {
    res.redirect('/user/login?msg=등록되지 않은 사용자 입니다');
  }
});

router.get('/profile', (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('./user/profile.html', {
      userInfo,
    });
  } else {
    res.redirect('/user/login?msg=로그인부터 하세요');
  }
});

router.get('/logout', (req, res) => {
  if (req.headers.cookie) {
    if (req.headers.cookie) {
      const [, privateKey] = req.headers.cookie.split('=');
      delete session[privateKey];
      res.setHeader('Set-Cookie', 'connect.id=delete; Max-age=0; path=/');
      res.redirect('/');
    } else {
      res.redirect('/user/login?msg=로그인부터 하라니까요?!');
    }
  }
});

module.exports = router;

 user.js

 

이렇게 해주니까 잘 작동한다.

 

 

3. 미들웨어 나누기

그럼 이제 user.js 에서 미들웨어를 전부 변수로 변경하고

user.controller.js 파일을 만들어서 거기다 모든 미들웨어를 변수에 담아서 모듈로 전달해주면 될듯하다.

 

그렇게 되면, user.js 는 session 과 userList가 필요 없으니

얘네를 지워주고,

user.controller.js 에서 require 로 session 과 userList 를 땡겨오자

 

const express = require('express');
const userController = require('./user.controller.js');

const router = express.Router();

router.get('/login', userController.loginGetMid);

router.post('/login', userController.loginPostMid);

router.get('/profile', userController.profileGetMid);

router.get('/logout', userController.logoutGetMid);

module.exports = router;

user.js

 

const { userList } = require('../../model/user.js');
const { session } = require('../../session');

exports.loginGetMid = (req, res) => {
  const msg = req.query.msg;
  res.render('./user/login', { msg });
};

exports.loginPostMid = (req, res) => {
  const { userid, userpw } = req.body;

  const [user] = userList.filter((v) => v.id === userid && v.pw === userpw);
  if (user) {
    const privateKey = Math.floor(Math.random() * 1000000000);
    session[privateKey] = user;
    console.log(session);
    res.setHeader('Set-Cookie', `connect.id=${privateKey}; path=/`);
    res.redirect('/');
  } else {
    res.redirect('/user/login?msg=등록되지 않은 사용자 입니다');
  }
};

exports.profileGetMid = (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('./user/profile.html', {
      userInfo,
    });
  } else {
    res.redirect('/user/login?msg=로그인부터 하세요');
  }
};

exports.logoutGetMid = (req, res) => {
  if (req.headers.cookie) {
    if (req.headers.cookie) {
      const [, privateKey] = req.headers.cookie.split('=');
      delete session[privateKey];
      res.setHeader('Set-Cookie', 'connect.id=delete; Max-age=0; path=/');
      res.redirect('/');
    } else {
      res.redirect('/user/login?msg=로그인부터 하라니까요?!');
    }
  }
};

user.controller.js

 

이렇게 하고 나니까

server.js 에 있는 메인페이지 라우터도 index.js 와 index.controller.js 로 나눠도 될것 같다.

 

const express = require('express');
const nunjucks = require('nunjucks');
const userRouter = require('./route/user/user.js');
const indexRouter = require('./route/index/index.js');

const app = express();

app.set('view engine', 'html');
nunjucks.configure('views', { express: app });

app.use(express.urlencoded({ extended: true }));

app.use('/', indexRouter);

app.use('/user', userRouter);

app.listen(3000);

server.js

 

const express = require('express');
const indexController = require('./index.controller.js');

const router = express.Router();

router.get('/', indexController.indexGetMid);

module.exports = router;

index.js

 

const { session } = require('../../session');

exports.indexGetMid = (req, res) => {
  if (req.headers.cookie) {
    const [, privateKey] = req.headers.cookie.split('=');
    const userInfo = session[privateKey];
    res.render('index.html', {
      isLogin: true,
      userInfo,
    });
  } else {
    res.render('index.html', { isLogin: false });
  }
};

index.controller.js

 

디렉토리 구성

 

요렇게 완성했고,

동작역시 부드럽게 잘 작동한다!