1. 寫在前面 當我們登錄了一個網站,在沒有退出登錄的情況下,我們關閉了這個網站 ,過一段時間,再次打開這個網站,依然還會是登錄狀態。這是因為,當我們登錄了一個網站,伺服器會保存我們的登錄狀態,直到我們退出登錄,或者保存的登錄狀態過期。那伺服器是通過什麼存儲我們的登錄狀態的呢? 答案就是 Sessi ...
1. 寫在前面
當我們登錄了一個網站,在沒有退出登錄的情況下,我們關閉了這個網站 ,過一段時間,再次打開這個網站,依然還會是登錄狀態。這是因為,當我們登錄了一個網站,伺服器會保存我們的登錄狀態,直到我們退出登錄,或者保存的登錄狀態過期。那伺服器是通過什麼存儲我們的登錄狀態的呢? 答案就是 Session ,服務通過 Session 能夠記錄每個客戶端連接的狀態。關於 Session 的原理,在這就不多說了,本文主要介紹在 Express 框架中,如何使用 Session 來實現用戶登錄身份驗證。
2. 環境配置
在Node 環境中, 並沒有集成 Express 和 Session 的庫,因此需要進行安裝,首先進入建立一個項目目錄,然後在項目根目錄中,利用下麵命令安裝四個模塊。
1) Express
該模塊能夠讓我們快速的搭建一個 Web 開發框架。
2) body-parser
該模塊是 Express 模塊的中間件,方便我們解析瀏覽器發送來的 body 數據。
3) express-session
該模塊也是 Express 模塊中間件,方便我們處理客戶端的 session。
4) ejs
該模塊是一個渲染引擎。 方便我們將後臺變數數據綁定到前臺頁面上。
安裝如下:
npm install express --save
npm install body-parser --save
npm install express-session --save
npm install ejs --save
3. 登錄與驗證
Session 能夠標記客戶端在伺服器上的狀態。利用這一點,我們能夠實現客戶端的登錄驗證。Session 登錄驗證的流程大致為:客戶端若在未登錄的狀態下請求主頁,那麼伺服器將該請求重定向到登錄頁面;客戶端在登錄後,伺服器需要記錄保存該客戶端的登錄狀態,並給予一個活動期限,這樣下一次伺服器請求主頁的時候,就能夠判斷該客戶端的登錄狀態,若登錄狀態有效,直接返回客戶端需要的頁面,否則重定向到登錄頁面。
對於 Session 的過期時間,如果沒有設置 Session 的過期時間,伺服器會根據自己配置中預設有效期,將長期不與伺服器交互的 Session 進行刪除。
下麵貼出實例代碼,界面比較簡單,伺服器後臺代碼註釋寫的很清楚,因此就不再進行說明瞭。
項目的目錄結構如下:
登錄頁面(login.html) 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<form action="/login" method="POST">
用戶名: <input type="text" name="username"/> <br>
密碼: <input type="password" name="pwd"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
主頁(home.html)代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>用戶名:<span><%= username %> </span> <a href="/logout">退出登錄</a></div>
</body>
</html>
伺服器(app.js)代碼如下:
/**
* Created by tjm on 9/7/2017.
*/
var express = require('express');
var app = express();
var session = require('express-session');
var bodyparser = require('body-parser');
// 下麵三行設置渲染的引擎模板
app.set('views', __dirname); //設置模板的目錄
app.set('view engine', 'html'); // 設置解析模板文件類型:這裡為html文件
app.engine('html', require('ejs').__express); // 使用ejs引擎解析html文件中ejs語法
app.use(bodyparser.json()); // 使用bodyparder中間件,
app.use(bodyparser.urlencoded({ extended: true }));
// 使用 session 中間件
app.use(session({
secret : 'secret', // 對session id 相關的cookie 進行簽名
resave : true,
saveUninitialized: false, // 是否保存未初始化的會話
cookie : {
maxAge : 1000 * 60 * 3, // 設置 session 的有效時間,單位毫秒
},
}));
// 獲取登錄頁面
app.get('/login', function(req, res){
res.sendFile(__dirname + '/login.html')
});
// 用戶登錄
app.post('/login', function(req, res){
if(req.body.username == 'admin' && req.body.pwd == 'admin123'){
req.session.userName = req.body.username; // 登錄成功,設置 session
res.redirect('/');
}
else{
res.json({ret_code : 1, ret_msg : '賬號或密碼錯誤'});// 若登錄失敗,重定向到登錄頁面
}
});
// 獲取主頁
app.get('/', function (req, res) {
if(req.session.userName){ //判斷session 狀態,如果有效,則返回主頁,否則轉到登錄頁面
res.render('home',{username : req.session.userName});
}else{
res.redirect('login');
}
})
// 退出
app.get('/logout', function (req, res) {
req.session.userName = null; // 刪除session
res.redirect('login');
});
app.listen(8000,function () {
console.log('http://127.0.0.1:8000')
})
到此,session 實現登錄驗證就完成。上面的例子 session 是保存在服務記憶體中,當然還可以保存在文件或資料庫中,只需要配置 session 中間件即可。
app.use(session({
secret: 'secretkey',
store: new MongoStore({
db: 'sessiondb'
})
}));
上面的代碼則是將 session 保存到 MongoDB 資料庫,當然 Session 的配置還有一些,具體參考:https://www.npmjs.com/package/express-session