[Node.JS] 강좌 10-3편: Express 프레임워크 응용하기 – express-session 편


list

이 강좌는 강좌 10-2 편과 이어지는 강좌입니다.

강좌를 작성하다가 글이 너무 길어져서 3편으로 나누어 작성한 점 유의해주세요 🙂

10-1: EJS
10-2: RESTful API
10-3: express-session


express-session

express-session 은 Express 프레임워크에서 세션을 관리하기 위해 필요한 미들웨어 입니다.

이번 강좌에서는 express-session 을 통해 로그인 및 로그아웃을 구현해보도록 해보겠습니다.

사용 예제

Express에 적용

var session = require('express-session');

app.use(session({
 secret: '@#@$MYSIGN#@$#$',
 resave: false,
 saveUninitialized: true
}));
  • secret – 쿠키를 임의로 변조하는것을 방지하기 위한 값 입니다. 이 값을 통하여 세션을 암호화 하여 저장합니다.
  • resave – 세션을 언제나 저장할 지 (변경되지 않아도) 정하는 값입니다. express-session documentation에서는 이 값을 false 로 하는것을 권장하고 필요에 따라 true로 설정합니다.
  • saveUninitialized – 세션이 저장되기 전에 uninitialized 상태로 미리 만들어서 저장합니다.

 

세션 초기 설정 (initialization)

app.get('/', function(req, res){
    sess = req.session;
});

간단하게 이렇게 라우터 콜백함수 안에서 req.session 으로 세션에 접근 할 수 있습니다.

세션 변수 설정

app.get('/login', function(req, res){
    sess = req.session;
    sess.username = "velopert"
});

따로 키를 추가해줄 필요 없이 sess.[키 이름]  = 값 으로 세션 변수를 설정 할 수 있습니다.

 

세션 변수 사용

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

예상 하셨겠지만 세션 변수를 사용하는 것 역시 이렇게 간단합니다.

 

세션 제거

req.session.destroy(function(err){
   // cannot access session here
});

세션을 제거할땐 (로그아웃) 위와 같이 합니다.
destroy() 메소드의 콜백함수에서는 세션에 접근 할 수 없다는점 명심하세요.

 

적용

자, 이제 express-session 을 저희가 강좌 10-1 과 10-2 에서 만들던 프로젝트에 적용해보겠습니다.

LOGIN API

강좌 10-2 REST API 편에서 배웠던 지식을 토대로 로그인 API 를 작성해봅시다.
(router/main.js 에 추가)

    app.get('/login/:username/:password', function(req, res){
        var sess;
        sess = req.session;

        fs.readFile(__dirname + "/../data/user.json", "utf8", function(err, data){
            var users = JSON.parse(data);
            var username = req.params.username;
            var password = req.params.password;
            var result = {};
            if(!users[username]){
                // USERNAME NOT FOUND
                result["success"] = 0;
                result["error"] = "not found";
                res.json(result);
                return;
            }

            if(users[username]["password"] == password){
                result["success"] = 1;
                sess.username = username;
                sess.name = users[username]["name"];
                res.json(result);

            }else{
                result["success"] = 0;
                result["error"] = "incorrect";
                res.json(result);
            }
        })
    });

로그인에 성공했다면 세션에 username과 name을 저장하도록 했습니다.

 

LOGOUT API

로그인이 있었으면 로그아웃도 만들어야겠죠?

다음 코드를 작성해주세요 (router/main.js 에 추가)

    app.get('/logout', function(req, res){
        sess = req.session;
        if(sess.username){
            req.session.destroy(function(err){
                if(err){
                    console.log(err);
                }else{
                    res.redirect('/');
                }
            })
        }else{
            res.redirect('/');
        }
    })

로그아웃을 하고 메인페이지로 redirect 됩니다.

 

메인페이지 수정

메인페이지에서 세션을 조회 할 수 있도록 수정해줍니다.
우선 라우터 상단의 app.get(‘/’… ) 부분을 이렇게 업데이트 하세요.

     app.get('/',function(req,res){
         var sess = req.session;


         res.render('index', {
             title: "MY HOMEPAGE",
             length: 5,
             name: sess.name,
             username: sess.username
         })
     });

세션 변수를 EJS 템플릿 엔진에 전달 하게 했습니다.

이제 EJS 파일을 수정해야겠죠?

 

views/body.ejs 를 다음과같이 수정 하세요.

<h1>Loop it!</h1>
<ul>
    <% for(var i=0; i<length; i++){ %>
        <li>
            <%= "LOOP" + i %>
        </li>
    <% } %>
</ul>

<% if(username){ %>
    <h2>Welcome! <%= username %> (name: <%= name %>)</h2>
<% }else{ %>
    <h2> Please Login. </h2>
<% } %>

로그인 되었는지 안되어있는지 확인하고 로그인상태라면 환영메시지를,
그렇지 않다면 로그인 하라는 메시지를 띄웁니다.

 

테스트

1. http://localhost:3000/ 접속

이미지 4

2. http://localhost:3000/user/pass 접속 (유저 데이터는 직접 입력하세요)

이미지 8

3. http://localhost:3000/ 다시 접속

이미지 9

4. http://localhost:3000/logout 접속

이미지 4

마무리

수고하셨습니다. Express.js 를 사용해보면서 Node.js 와 Express.js 웹 프레임워크에 대한 기초를 다졌습니다.
강좌에서 사용된 코드는 https://github.com/velopert/express-tutorial 에서 모두 확인 할 수 있습니다.

list

  • alex kan

    “name”: “myapp”,
    “version”: “0.0.0”,
    “private”: true,
    “scripts”: {
    “start”: “node ./bin/www”
    },
    “dependencies”: {
    “body-parser”: “~1.15.2”,
    “cookie-parser”: “~1.4.3”,
    “debug”: “~2.2.0”,
    “ejs”: “~2.5.2”,
    “express”: “~4.14.0”,
    “morgan”: “~1.7.0”,
    “node-sass-middleware”: “0.9.8”,
    “serve-favicon”: “~2.3.0”

    버젼으로 따라하고 있는데

    Cannot read property ‘name’ of undefined 에러가 발생하네요….
    혹시 버전에 따른 차이가 있을수 있을까요?

    직접입력하면서 했던 코드에 문제가 있을까봐 github에 올려놓으신 코드들 복붙한후 테스트 해봐도 동일합니다. 확인 좀 부탁드릴께요 ㅠㅠ

    • alex kan

      익스프레스 제너레이터로 생성후 페이지들 수정해가면서 했던것인데 새프로젝트 만들어서 패키지.json 내용으로 인스톨하고하니 되네요… 제너레이터가 독이었네요 ㅋㅋ

  • freedom

    세션 정보가 없을시 모든 요청에 대해 로그인 화면으로 가게 셋팅을 어찌해야 할까요?

  • Ha

    감사합니다. 덕분에 nodejs express 기초를 배웠습니다.

  • 김재구

    감사합니다. 너무 잘 봤습니다~ ^^