なんだかGoodVibes

日々の勉強メモです。

【Node】express-sessionを使ってみる

Node.js

こんにちは。
本日はexpress-sessionのメモです。

概要

動作は、ログイン画面で名前を入力。
ホーム画面でログイン時に入力された名前を
セッションから取り出して表示します。

ディレクトリ構造は以下です。

app.js
router
    |-----home.js
    |-----login.js
views
    |-----home.ejs
    |-----login.ejs

※style.cssは省略しています。


サーバ(app.js)

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

var homeRouter = require('./router/home');
var loginRouter = require('./router/login');

var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.urlencoded({extended : false}));

// セッションの設定
app.use(session({
    secret : 'destin',
    resave : false,
    saveUninitialized : false,
    cookie: {
        httpOnly : true,
        secure   : false,
        maxage   : 1000 * 60 * 30
    }
}));

app.use('/', homeRouter);
app.use('/login', loginRouter);

var server = app.listen(3000, () => {
    console.log('Server start!');
});

セッションの設定については以下を参照してください。

express-session - npm


ホーム画面

ホーム画面にアクセスした際に、
セッションが切れている場合は、
ログイン画面に遷移します。

セッションに保存されたユーザー名を表示します。

さらに、ホーム画面にはログアウトボタンを用意し、
セッションを削除するようにしています。

home.js
var express = require('express');
var router = express.Router();

router.get('/', (req, res) => {
    // セッションの確認
    var user = req.session['user'];
    if (user == null) {
        res.redirect('/login');
        return;
    }

    res.render('home.ejs', {
        title: 'HOME',
        user : user
    });
});

router.post('/', (req, res) => {
    req.session.destroy(err => {
        res.redirect('/login');
    });
});

module.exports = router;


home.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="texl/html; charset=UTF-8">
    <title><%= title %></title>
</head>

<body>
    <h1>こんにちは <%= user %> !!</h1>
    <br>
    <form method="POST" action="/">
        <input type="submit" value="Logout">
    </form>
</body>
</html>


ログイン画面

今回は、サンプルなので入力チェックは行っていません。
入力された名前をセッションに保存しています。

login.js
var express = require('express');
var router = express.Router();

router.get('/', (req, res) => {
    res.render('login.ejs', {
        title   : 'Login',
        content : '名前を入力してください。',
    });
});

router.post('/', (req, res) => {
    var n = req.body['user'];

    req.session.user = n;
    res.redirect('/');
});

module.exports = router;


login.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="texl/html; charset=UTF-8">
    <title><%= title %></title>
</head>

<body>
    <div role="main">
        <p><%-content %></p>
        <form method="POST" action="/login">
            <table>
                <tr>
                    <th>Name</th>
                </tr>
                <tr>
                    <td><input type="text" name="user" required></td>
                </tr>
            </table>
            <input type="submit" value="Login">
        </form>
    </div>
</body>
</html>


参考

express-session - npm


以上です。