[nodejs] Node.Js 활용하기 - 섹션 2. Session

session 1 - intro

웹 브라우저가 서버에 접속하면, 서버가 웹 브라우저에게 쿠키로 모든 정보를 저장. Save all. 가장 큰 문제점은 보안 이슈.

-> 개선하기 위해 서버쪽에서 데이터를 저장하는 session..

서버는 클라이언트에게 Save only id .. 접속한 사용자를 식별할 수 있는 값만 쿠키로 저장. real data는 서버에 저장.
보안상 더 좋고, 더 많은 정보를 저장할 수 있음.

session 2 - counter 1, 2

connect.sid 값이 같다면 같은 사용자의 요청으로 간주.

npm install express-session --save

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

app.use(session({
    secret: 'dkagh1886', //random한 값을 넣어주기.
    resave: false, // 접속할 때마다 session id를 새로 발급하지 말아라.
    saveUninitialized: true // session을 사용하기 전까지 session id를 발급하지 말아라
}));

app.get('/count', function(req, res){
    if (req.session.count){
        req.session.count++;
    } else{
        req.session.count = 1;
    }
    res.send('count : '+req.session.count);
});

프로그램을 멈추고 다시 시작하면, session에 저장되어있던 정보 삭제됨. -> 메모리에 저장되기 때문에. -> 실제 개발할 때는 db에 저장하든지 다른 방법을 사용해야 함.

session 4 - login 1

just 예제, 실전에 이 코드를 그대로 사용하는 것은 부적절. 그냥 세션과 로그인의 이해를 위해 하는 실습.

간단한 로그인 + 로그아웃 예제.

사용자가 username과 password를 입력했을 때, 미리 만들어놓은 변수의 username, password와 일치하는 경우 로그인이 성공하고 세션에 displayName 정보를 저장. 로그아웃을 누르면 session의 정보를 삭제.

app.get('/auth/login', function(req, res){
    var output =  `
    <h1>Login</h1>
    <form action="/auth/login" method="post">
        <p><input type="text" name="username" placeholder="username"> </p>
        <p><input type="password" name="password" placeholder="password"></p>
        <p><input type="submit">

    </form>
    `
    res.send(output);
})

app.post('/auth/login', function(req, res){
    var user = {
        username: 'hadestown',
        password: '111',
        displayName: 'Hadestown'
    };
    var uname = req.body.username;
    var pwd = req.body.password;

    if (uname === user.username && pwd === user.password){
        req.session.displayName = user.displayName
        res.redirect('/welcome');
    } else{
        res.send('Who are you? <a href="/auth/login">login</a>');
    }
})

app.get('/welcome', function(req, res){
    if (req.session.displayName){
        res.send(`
        <h1>Hello, ${req.session.displayName} </h1>
        <a href="/auth/logout">Logout</a>
        `);
    } else{
        res.send(`
        <h1>Welcome</h1>
        <a href="/auth/login">Login</a>
        `);
    }
});

app.get('/auth/logout', function(req, res){
    delete req.session.displayName;
    res.redirect('/welcome');
})

지금은 세션이 메모리에 저장되어 있음. 다음에는 세션 정보를 db에 저장하는 방법을 알려줌.

session 8 - session store-file

express-session 모듈은 메모리에 세션 정보를 저장. 프로그램을 끄고 다시 실행하면 세션 정보가 사라짐. application이 실행되고 있는 동안만 유지. 실제로 서비스할 때는 사용 불가.

-> 영구적으로 데이터를 저장할 수 있는 db나, file 사용.

 

file을 사용하기 위해 session-file-stroe 모듈을 설치해야 한다.

https://www.npmjs.com/package/session-file-store

var FileStore = require('session-file-store')(session);

app.use(session({
    secret: 'dkagh1886', //random한 값을 넣어주기.
    resave: false, // 접속할 때마다 session id를 새로 발급하지 말아라.
    saveUninitialized: true, // session을 사용하기 전까지 session id를 발급하지 말아라
    store: new FileStore(), // file에 저장하기 위한 조건 추가.
}));

코드 실행하면 sessions라는 디렉토리 생성되고 접속하면 sessions 디렉토리 안에 json 파일 생성되어 세션 정보가 저장됨.

 

💣 여기서 로그인을 눌러도 session 정보에 displayName이 생성되지 않고 처음의 Welcome 페이지로 계속 redirect 되는 오류가 발생했는데 유튜브 댓글을 보니

javascript 의 비동기적 실행 때문입니다. req.session.displayName = user.displayName; 을 실행하여도 바로 다음 줄인 res.redirect('/welcome'); 이 바로 실행되므로 displayName 값이 제대로 대입되기 이전에 redirection이 먼저 실행되어 발생하는 문제입니다. 해결하기 위해서는 req.session.save()를 사용하시면 되는데 사용하는 방법은 바로 다음 강의에 나옵니다.

라는 댓글 발견.. 근데 왜 이전에 메모리에서 저장할 때는 잘 되었는데 지금 그런걸까? 메모리에서 읽어오는 것과 파일에서 읽어오는 것에 속도 차이가 있어서 그런걸까?🤔

 

근데 DB도 잘 된다..(???) DB에서 읽어오는 게 왜 로컬 디렉토리에서 읽어오는 것보다 빠른거죠..?? 아마 뭔가 다른 이유가 있으려나🤔

 

아무튼 해결을 위해서는 session에 정보가 저장된 것을 확인한 후에 redirect가 실행되도록 다음과 같이 코드를 추가해야 한다.

// app.get('/auth/login')에 추가.
if (uname === user.username && pwd === user.password){
        req.session.displayName = user.displayName
        req.session.save(function(){
            res.redirect('/welcome');
        })
    }

// app.get('/auth/logout') 에도 추가해주기
app.get('/auth/logout', function(req, res){
    delete req.session.displayName;
    req.session.save(function(){
        res.redirect('/welcome'); // session 정보 저장이 끝난 후에 redirect 실행
    })
})

session 9 - session store-mysql

https://www.npmjs.com/package/express-mysql-session

express-mysql-session을 사용하기 위한 기본 설정

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

var options = {
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: '1111',
    database: 'o2'
};

app.use(session({
    secret: 'dkagh1886', //random한 값을 넣어주기.
    resave: false, // 접속할 때마다 session id를 새로 발급하지 말아라.
    saveUninitialized: true, // session을 사용하기 전까지 session id를 발급하지 말아라
    store: new MySQLStore(options), // options 반드시 필요.
}));

그리고 위 코드를 실행하면, o2 데이터베이스에 session이라는 테이블이 생성되는 것을 확인할 수 있고, 해당 주소로 접속하면 세션 정보가 생성 되는 걸 확인할 수 있다. 테이블 구조는 다음과 같다.

mysql> desc sessions;
+------------+--------------+------+-----+---------+-------+
| Field      | Type         | Null | Key | Default | Extra |
+------------+--------------+------+-----+---------+-------+
| session_id | varchar(128) | NO   | PRI | NULL    |       |
| expires    | int unsigned | NO   |     | NULL    |       |
| data       | mediumtext   | YES  |     | NULL    |       |
+------------+--------------+------+-----+---------+-------+
3 rows in set (0.01 sec)