Express + Session 实现登录验证功能


Posted in Javascript onSeptember 08, 2017

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" rel="external nofollow" >退出登录</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

总结

以上所述是小编给大家介绍的Express + Session 实现登录验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
详解ES6中的代理模式——Proxy
Jan 08 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 #Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
JavaScript实现开关等效果
Sep 08 #Javascript
浅谈React Native 中组件的生命周期
Sep 08 #Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 #Javascript
关于Ajax的原理以及代码封装详解
Sep 08 #Javascript
vue父子组件的嵌套的示例代码
Sep 08 #Javascript
You might like
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP模板解析类实例
2015/07/09 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
python异常和文件处理机制详解
2016/07/19 Python
python if not in 多条件判断代码
2016/09/21 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Python包和模块的分发详细介绍
2020/06/19 Python
keras 多任务多loss实例
2020/06/22 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
使用python绘制分组对比柱状图
2022/04/21 Python
JavaScript设计模式之原型模式详情
2022/06/21 Javascript