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 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
jquery实现上传图片功能
Jun 29 jQuery
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
生物科学专业自荐书
2014/06/20 职场文书
先进个人事迹材料
2014/12/29 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
golang 语言中错误处理机制
2021/08/30 Golang
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers