搜尋

首頁 >web前端 >js教程 >Express框架中使用Session實現登入時身份驗證

Express框架中使用Session實現登入時身份驗證

巴扎黑
巴扎黑原創
2017-09-09 09:51:411658瀏覽

本文主要介紹在 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(&#39;express&#39;);
var app = express();
var session = require(&#39;express-session&#39;);
var bodyparser = require(&#39;body-parser&#39;);
// 下面三行设置渲染的引擎模板
app.set(&#39;views&#39;, __dirname); //设置模板的目录
app.set(&#39;view engine&#39;, &#39;html&#39;); // 设置解析模板文件类型：这里为html文件
app.engine(&#39;html&#39;, require(&#39;ejs&#39;).__express); // 使用ejs引擎解析html文件中ejs语法
app.use(bodyparser.json()); // 使用bodyparder中间件，
app.use(bodyparser.urlencoded({ extended: true }));
// 使用 session 中间件
app.use(session({
  secret : &#39;secret&#39;, // 对session id 相关的cookie 进行签名
  resave : true,
  saveUninitialized: false, // 是否保存未初始化的会话
  cookie : {
    maxAge : 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
  },
}));
// 获取登录页面
app.get(&#39;/login&#39;, function(req, res){
  res.sendFile(__dirname + &#39;/login.html&#39;)
});
// 用户登录
app.post(&#39;/login&#39;, function(req, res){
  if(req.body.username == &#39;admin&#39; && req.body.pwd == &#39;admin123&#39;){
    req.session.userName = req.body.username; // 登录成功，设置 session
    res.redirect(&#39;/&#39;);
  }
  else{
    res.json({ret_code : 1, ret_msg : &#39;账号或密码错误&#39;});// 若登录失败，重定向到登录页面
  }
});
// 获取主页
app.get(&#39;/&#39;, function (req, res) {
  if(req.session.userName){ //判断session 状态，如果有效，则返回主页，否则转到登录页面
    res.render(&#39;home&#39;,{username : req.session.userName});
  }else{
    res.redirect(&#39;login&#39;);
  }
})
// 退出
app.get(&#39;/logout&#39;, function (req, res) {
  req.session.userName = null; // 删除session
  res.redirect(&#39;login&#39;);
});
app.listen(8000,function () {
  console.log(&#39;http://127.0.0.1:8000&#39;)
})

到此，session 實作登入驗證就完成。上面的範例 session 是保存在服務記憶體中，當然還可以儲存在檔案或資料庫中，只需要配置 session 中間件即可。 


app.use(session({
  secret: &#39;secretkey&#39;,
  store: new MongoStore({
    db: &#39;sessiondb&#39;
  })
}));

上面的程式碼則是將session 儲存到MongoDB 資料庫，當然Session 的設定還有一些，具體參考：

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

以上是Express框架中使用Session實現登入時身份驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何用js實現網頁圖片輪播下一篇：如何用js實現網頁圖片輪播

相關文章

看更多