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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
domReady的实现案例
Nov 23 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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
php str_replace的替换漏洞
2008/03/15 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
详解javascript高级定时器
2015/12/31 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python中的自省(反射)详解
2015/06/02 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
海洋科学专业求职信
2014/08/10 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
红色革命电影观后感
2015/06/18 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
学校体育节班级口号
2015/12/25 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis