Express + Session 实现登录验证功能

发布时间 - 2026-01-11 03:10:23    点击率:

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 实现登录验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# express  # session  # 登录验证  # Nodejs进阶:express+session实现简易登录身份认证  # Node.js+Express+MySql实现用户登录注册功能  # 用node和express连接mysql实现登录注册的实现代码  # Node+Express+MongoDB实现登录注册功能实例  # express框架中使用jwt实现验证的方法  # express + jwt + postMan验证实现持久化登录  # Vue+Express实现登录状态权限验证的示例代码  # nodejs使用express获取get和post传值及session验证的方法  # DevExpress实现GridControl单元格编辑验证的方法  # Express实现登录验证  # 客户端  # 重定向  # 当我们  # 用户登录  # 小编  # 是一个  # 还可以  # 让我们  # 在此  # 说了  # 则是  # 还会  # 不多  # 转到  # 这就  # 给大家  # 如果没有  # 只需要  # 很清楚  # 说明了 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 大学网站设计制作软件有哪些,如何将网站制作成自己app?  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  php485函数参数是什么意思_php485各参数详细说明【介绍】  Python文件流缓冲机制_IO性能解析【教程】  Laravel怎么上传文件_Laravel图片上传及存储配置  php 三元运算符实例详细介绍  韩国服务器如何优化跨境访问实现高效连接?  javascript中闭包概念与用法深入理解  高端建站三要素:定制模板、企业官网与响应式设计优化  Windows家庭版如何开启组策略(gpedit.msc)?(安装方法)  Laravel如何配置和使用缓存?(Redis代码示例)  海南网站制作公司有哪些,海口网是哪家的?  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  MySQL查询结果复制到新表的方法(更新、插入)  香港网站服务器数量如何影响SEO优化效果?  Laravel如何与Docker(Sail)协同开发?(环境搭建教程)  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  高端云建站费用究竟需要多少预算?  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  🚀拖拽式CMS建站能否实现高效与个性化并存?  打造顶配客厅影院,这份100寸电视推荐名单请查收  详解Android图表 MPAndroidChart折线图  如何在Windows 2008云服务器安全搭建网站?  Laravel如何自定义错误页面(404, 500)?(代码示例)  北京网站制作的公司有哪些,北京白云观官方网站?  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  香港代理服务器配置指南:高匿IP选择、跨境加速与SEO优化技巧  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  如何快速搭建高效可靠的建站解决方案?  详解Huffman编码算法之Java实现  JS碰撞运动实现方法详解  详解CentOS6.5 安装 MySQL5.1.71的方法  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  Swift中循环语句中的转移语句 break 和 continue  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  如何基于云服务器快速搭建个人网站?  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符(忽略数字与嵌套)  JS经典正则表达式笔试题汇总  如何在IIS服务器上快速部署高效网站?  动图在线制作网站有哪些,滑动动图图集怎么做?  高防服务器:AI智能防御DDoS攻击与数据安全保障  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  如何快速登录WAP自助建站平台?  如何快速搭建虚拟主机网站?新手必看指南  Laravel如何使用Vite进行前端资源打包?(配置示例)