การจัดการ Session Node.js ด้วย Express Session

จำนวนผู้เข้าชม : 3,404

โดยทั่วไป Client และ Server จะคุยกันผ่าน HTTP Protocol อย่างที่ทุกคนทราบกันดีว่า มันเป็น Stateless Protocol ซึ่งหมายความว่ามันขี้ลืมมากกกกก… เพราะทุกครั้งที่มีการ Request และ Response ทั้ง Client และ Server ไม่เคยจะจำกันได้เลยว่าเคยคุยกัน (เหมือนคนแปลกหน้า)

เพราะเหตุนั้น Session จึงเป็นตัวช่วยให้ทั้งสองจำกันได้ โดยจะเก็บข้อมูลบางส่วนที่เป็นเอกลักษณ์ที่ไม่ซ้ำใครของ Client นั้นๆเพื่อให้ Server สามารถตรวจสอบสิทธิ์การเข้ามาขอข้อมูลสำคัญต่างๆ

ข้อมูลดังกล่าวจะถูกเก็บในรูปแบบของ Memory หรือ Database ก็ได้แล้วแต่ผู้พัฒนาจะออกแบบ

Session ทำงานอย่างไร?

เมื่อ Client จะขอล็อกอินเข้าสู่ระบบ Server จะสร้าง Session เก็บไว้ หลังจากนั้นจะส่งข้อมูล และคุกกี้ (Cookie) กลับไปให้ Client เก็บไว้ โดยคุกกี้นี้จะมีรหัสเฉพาะของ Session เมื่อ Client จะเข้ามาขอข้อมูลก็แค่แนบคุกกี้ไปด้วยเท่านี้ Server ก็จะ “อ๋อออออ… เราเคยรู้จักกันแล้ววว…เข้ามาได้”

ก่อนเริ่มโปรเจค

พื้นฐานที่ควรมี: Nodejs, HTML, CSS

ถ้าพร้อมแล้วมาเริ่มกันเลย!!!

สร้างโปรเจ็คขึ้นมาด้วยคำสั่ง

npm init -y

ติดตั้ง Package ในโปรเจ็ค

npm install express express-session cookie-parser

สร้างไฟล์ index.js ใส่โค้ดด้านล่างลงไป

const express = require('express')
const app = express()
const sessions = require('express-session');
const cookieParser = require("cookie-parser");

const oneDay = 1000 * 60 * 60 * 24;
app.use(sessions({
    secret: "secrctekeykokdev",
    saveUninitialized: true,
    cookie: { maxAge: oneDay },
    resave: false
}));
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(cookieParser());
app.use(express.static(__dirname));

const myusername = 'kokdev'
const mypassword = 'pass'

// a variable to save a session
var session;

app.get('/', (req, res) => {
    session = req.session;
    if (session.userid) {
        res.send("Welcome User <a href=\'/logout'>click to logout</a>");
    } else
        res.sendFile('views/index.html', { root: __dirname })
});

app.post('/user', (req, res) => {
    if (req.body.username == myusername && req.body.password == mypassword) {
        session = req.session;
        session.userid = req.body.username;
        console.log(req.session)
        res.send(`Hey there, welcome <a href=\'/logout'>click to logout</a>`);
    } else {
        res.send('Invalid username or password');
    }
})

app.get('/logout', (req, res) => {
    req.session.destroy();
    res.redirect('/');
});

app.listen(3000, () => {
    console.log('Application listening on port 3000!')
})

เพิ่มไฟล์ app.css ใช้โค้ดด้านล่าง

body {
    display: flex;
    justify-content: center;
}

form {
    display: flex;
    flex-direction: column;
}

.input-field {
    position: relative;
    margin-top: 2rem;
}

.input-field input {
    padding: 0.8rem;
}

form .input-field:first-child {
    margin-bottom: 1.5rem;
}

form input[type="submit"] {
    background: linear-gradient(to left, #313131, #7c7c8f);
    color: white;
    border-radius: 4px;
    margin-top: 2rem;
    padding: 0.4rem;
}

เพิ่มไฟล์ส่วนข้างหน้า

<html>

<head>
    <link rel="stylesheet" href="views/app.css">
</head>

<body>
    <form action="/user" method="post">
        <h2>Login</h2>
        <div class="input-field">
            <input type="text" name="username" id="username" placeholder="Enter Username">
        </div>
        <div class="input-field">
            <input type="password" name="password" id="password" placeholder="Enter Password">
        </div>
        <input type="submit" value="LogIn">
    </form>
</body>

</html>

โครงสร้างไฟล์ทั้งหมดสามารถดูได้จากรูปด้านล่างได้เลยครับ