本文主要介紹在 Express 框架中,如何使用 Session 來實現使用者登入驗證。對express session實現登入驗證相關知識,有興趣的朋友一起看看吧
#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> <p>用户名:<span><%= username %> </span> <a href="/logout" rel="external nofollow" >退出登录</a></p> </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
以上是Express框架中使用Session實現登入時身份驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!