【前端】NodeJS:会话控制

news2024/11/15 17:19:49

文章目录

  • 1 介绍
  • 2 cookie
    • 2.1 cookie是什么
    • 2.2 cookie的特点
    • 2.3 cookie的运行流程
    • 2.4 浏览器操作cookie
    • 2.5 cookie的代码操作
  • 3 session
    • 3.1 session是什么
    • 3.2 session的作用
    • 3.3 session运行流程
    • 3.4 session的代码操作
  • 4 session和cookie的区别
  • 5 token
    • 5.1 token是什么
    • 5.2 token的作用
    • 5.3 token的工作流程
    • 5.4 token的特点
    • 5.5 JWT
  • 6 附录
    • 6.1 本地域名
      • 6.1.1 操作流程
      • 6.1.2 原理

1 介绍

  • 所谓会话控制就是对会话进行控制。
  • HTTP是一种无状态的协议,它没有办法区分多次的请求是否来自于同一个客户端,无法区分用户,而产品中又大量存在的这样的需求,所以我们需要通过会话控制来解决该问题。
  • 常见的会话控制技术有三种:
    cookie
    session
    token

2 cookie

2.1 cookie是什么

cookie是HTTP服务器发送到用户浏览器并保存在本地的一小块数据。

  • cookie是保存在浏览器端的一小块数据。
  • cookie是按照域名划分保存的。

简单示例:

域名cookie
www.baidu.coma=100; b=200
www.bilibili.comxid=1020abce121; hm=112411213
jd.comx=100; ocw=12414cce

2.2 cookie的特点

浏览器向服务器发送请求时,会自动将当前域名下可用的cookie设置在请求头中,然后传递给服务器。这个请求头的名字也叫cookie,所以将cookie理解为一个HTTP的请求头也是可以的。

2.3 cookie的运行流程

填写账号和密码校验身份(username=zhangsan; password=123456),校验通过后下发cookie(set-cookie: name=zhangsan)。
有了cookie之后,后续向服务器发送请求时,就会自动携带cookie。

GET /home HTTP/1.1
host: 127.0.0.1:3000
cookie: name=zhangsan

2.4 浏览器操作cookie

浏览器操作cookie的操作,使用相对较少,大家了解即可。

  • 禁用所有 cookie
  • 删除 cookie
  • 查看 cookie

2.5 cookie的代码操作

express中可以使用cookie-parser进行处理。
不同浏览器中的cookie是相互独立的,不共享。

//安装 npm i cookie-parser
//导入 express
const express = require('express');
const cookieParser = require('cookie-parser') 

//创建应用对象
const app = express();
app.use(cookieParser()); //设置 cookieParser 中间件

//创建路由规则
app.get('/set-cookie', (req, res) => {
  	// res.cookie('name', 'zhangsan'); // 会在浏览器关闭的时候, 销毁
  	res.cookie('name','lisi', {maxAge: 60 * 1000}) // max 最大  age 年龄,maxAge:设置cookie生命周期,单位是毫秒(报文中单位是秒)
  	res.cookie('theme', 'blue');
  	res.send('home');
});

//删除 cookie
app.get('/remove-cookie', (req, res) => {
  	//调用方法
  	res.clearCookie('name');
  	res.send('删除成功~~');
});

//获取 cookie
app.get('/get-cookie', (req, res) => {
  	//获取 cookie
  	console.log(req.cookies);
  	res.send(`欢迎您 ${req.cookies.name}`);
})

//启动服务
app.listen(3000);

3 session

3.1 session是什么

session是保存在服务器端的一块儿数据,保存当前访问用户的相关信息。

3.2 session的作用

实现会话控制,可以识别用户的身份,快速获取当前用户的相关信息。

3.3 session运行流程

填写账号和密码校验身份(username=zhangsan; password=123456),校验通过后创建session信息([{sid: '15abf69c89b214', username: 'zhangsan', user_id: "258fc963adc666"}] ),然后将session_id的值通过响应头返回给浏览器(set-cookie: sid=15abf69c89b214 )。
有了cookie,下次发送请求时会自动携带cookie(cookie: sid=15abf69c89b214),服务器通过cookie中的session_id的值确定用户的身份。

[
{sid: '15abf69c89b214' , username: 'zhangsan', user_id: "258fc963adc666"},
{sid: '185a6e2f14ea62' , username: 'lisi', user_id: "725fc963adc159"},
{sid: '258c36ae2f4eac' , username: 'wangwu', user_id: "a9ae2fa3e2af1e1"},
]

3.4 session的代码操作

express中可以使用express-session对session进行操作。

//1. 安装包 npm i express-session connect-mongo
//导入 express
const express = require('express');
//2. 引入 express-session  connect-mongo
const session = require("express-session");
const MongoStore = require('connect-mongo');

//创建应用对象
const app = express();
//3. 设置 session 的中间件
app.use(session({
  	name: 'sid',   //设置cookie的name,默认值是:connect.sid
  	secret: 'atguigu', //参与加密的字符串(又称签名)  加盐
  	saveUninitialized: false, //是否为每次请求都设置一个cookie用来存储session的id(是否为每次请求都创建一个session对象)
  	resave: true,  //是否在每次请求时重新保存session  20 分钟    4:00  4:20
  	store: MongoStore.create({
    	mongoUrl: 'mongodb://127.0.0.1:27017/bilibili' //数据库的连接配置
  	}),
  	cookie: {
    	httpOnly: true, // 开启后前端无法通过 JS 操作(前端通过JS访问cookie:document.cookie)
    	maxAge: 1000 * 60 * 5 // 这一条 是控制 sessionID 的过期时间的!!!
  	},
}))

//首页路由
app.get('/', (req, res) => {
  	res.send('home');
})

//登录  session 的设置
app.get('/login', (req, res) => {
  	// username=admin&password=admin
  	if(req.query.username === 'admin' && req.query.password === 'admin'){
	    //设置 session 信息
	    req.session.username = 'admin';
	    req.session.uid = '258aefccc';
	    //成功响应
	    res.send('登录成功');
  	}else{
    	res.send('登录失败~~');
  	}
})

//session 的读取
app.get('/cart', (req, res) => {
  	//检测 session 是否存在用户数据
  	if(req.session.username){
    	res.send(`购物车页面, 欢迎您 ${req.session.username}`);
  	}else{
    	res.send('您还没有登录~~');
  	}
});

//session 的销毁
app.get('/logout', (req, res) => {
  	req.session.destroy(() => {
    	res.send('退出成功~~');
  	})
})

//启动服务
app.listen(3000);

4 session和cookie的区别

cookie和session的区别主要有如下几点:

  1. 存在的位置
    cookie:浏览器端。
    session:服务端。
  2. 安全性
    cookie是以明文的方式存放在客户端的,安全性相对较低。
    session存放于服务器中,所以安全性相对较好。
  3. 网络传输量
    cookie设置内容过多会增大报文体积,会影响传输效率。
    session数据存储在服务器,只是通过cookie传递id,所以不影响传输效率。
  4. 存储限制
    浏览器限制单个cookie保存的数据不能超过4K,且单个域名下的存储数量也有限制。
    session数据存储在服务器中,所以没有这些限制。

5 token

5.1 token是什么

token是服务端生成并返回给HTTP客户端的一串加密字符串,token中保存着用户信息。

5.2 token的作用

实现会话控制,可以识别用户的身份,主要用于移动端APP。

5.3 token的工作流程

填写账号和密码校验身份()username=zhangsan; password=123456,校验通过后响应token,token一般是在响应体中返回给客户端的。

HTTP/1.1 200 OK
Content-type: application/json
Content-length: 168
{
"token":
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiJ4eHgiLCJpYXQiOjE2Nz
cxNjQ0OTIsImV4cCI6MTY3NzE2NzQ5Mn0.lBxNeoG3vrhTe-LyDLBEJRcKpaf_DFYkseMnkMbyyQ",
}

后续发送请求时,需要手动将token添加在请求报文中,一般是放在请求头中。

GET /cart HTTP/1.1
host: 127.0.0.1:3000
token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQi
OiJ4eHgiLCJpYXQiOjE2NzcxNjQ0OTIsImV4cCI6MTY3NzE2Nz
Q5Mn0.lBxNeoG3vrhTe-Ly-DLBEJRcKpaf_DFYkseMnkMbyyQ

5.4 token的特点

  • 服务端压力更小
    数据存储在客户端
  • 相对更安全
    数据加密
    可以避免 CSRF(跨站请求伪造)
  • 扩展性更强
    服务间可以共享
    增加服务节点更简单

5.5 JWT

JWT(JSON Web Token)是目前最流行的跨域认证解决方案,可用于基于token的身份验证。
JWT使token 的生成与校验更规范。
我们可以使用jsonwebtoken包来操作token。

//导入 jwt
const jwt = require('jsonwebtoken');

//创建(生成) token 
//let token = jwt.sign(用户数据, 加密字符串, 配置对象);
let token = jwt.sign({
	username: 'zhangsan'
}, 'atguigu', {
	expiresIn: 60, //生命周期,单位是秒
})
console.log(token); // t

let t = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InpoYW5nc2FuIiwiaWF0IjoxNjc3MzEzNTc1LCJleHAiOjE2NzczMTM2MzV9.fziAyCdYfhMYeM2a-XPMNZYdhIVYpluBoNR1c5oUm70';

//校验 token
jwt.verify(t, 'atguigu', (err, data) => {
  	if(err){
	    console.log('校验失败~~');
	    return;
  	}
  	console.log(data);
})

扩展阅读:https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html。

6 附录

6.1 本地域名

所谓本地域名就是只能在本机使用的域名,一般在开发阶段使用。

6.1.1 操作流程

编辑文件:C:\Windows\System32\drivers\etc\hosts

127.0.0.1 www.baidu.com

在这里插入图片描述
在bin文件夹下的www文件中,将端口改为80,在网页中通过url访问时就不用带端口号了。
在这里插入图片描述
如果修改失败,可以修改该文件的权限。

6.1.2 原理

在地址栏输入域名之后,浏览器会先进行DNS(Domain Name System)查询,获取该域名对应的IP地址,请求会发送到DNS服务器,可以根据域名返回IP地址。
可以通过ipconfig /all查看本机的DNS服务器。
hosts文件也可以设置域名与IP的映射关系,在发送请求前,可以通过该文件获取域名的IP地址。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2050151.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络安全之xss靶场练习

目录 一、xss靶场练习 1、Ma Spaghet! 2、Jefff 第一个方法 第二个方法 3、Ugandan Knuckles 4、Ricardo Milos 5、Ah Thats Hawt 6、Ligma 7、Mafia​编辑 8、Ok, Boomer 一、xss靶场练习 靶场地址 https://xss.pwnfunction.com/ 页面显示如下 1、Ma Spaghet! 分析…

旧版Pycharm支持的python版本记录

版权声明:本文为博主原创文章,如需转载请贴上原博文链接:旧版Pycharm支持的python版本记录-CSDN博客 前言:近期由于打算研究GitHub上一个开源量化交易平台开发框架,但是该框架是基于python3.10的版本开发,所…

海康VisionMaster使用学习笔记5-开机自启动

开机自启动 在实际应用中,用户会希望机台上电开机后,软件能自启动避免现场人员误操作,减少机台重新上电时的操作步骤以提升效率。 设置 打开VM,点击设置,软件设置->开机自启动->勾选开机自启动->确定 默认运行界面 启动时以设定的…

MapReduce原理和操作

目录 一、MapReduce开发1. 数据处理的过程(MapReduce)2. 入门案例 二、MapReduce的高级特性1. 序列化2. 排序3. 分区4. Combiner——合并5. Shuffle——洗牌 一、MapReduce开发 1. 数据处理的过程(MapReduce) 注意 JobMapReduce&…

不同操作系统中如何搭建RabbitMQ开发环境?

大家好,我是袁庭新。今天介绍在不同操作系统中如何搭建RabbitMQ开发环境? 在使用RabbitMQ之前必须预先安装配置,参考RabbitMQ官网说明,RabbitMQ支持多平台安装,例如Linux、Windows、macOS、Docker等。不同架构的芯片对…

通过电影之镜,探索美的无限可能

通过电影之镜,探索美的无限可能:以《至爱梵高星空之谜》、《阳光灿烂的日子》与《这个杀手不太冷》为例 在光影交错的世界里,电影不仅是故事的讲述者,更是审美的引领者。三部风格迥异却同样引人入胜的电影——《至爱梵高星空之谜…

SSM学生社团管理系统—计算机毕业设计源码无偿分享20360

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2 学生社团管理系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流程 2.2.2 数据修改流程 2.2.3 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系…

海康VisionMaster使用学习笔记8-OKNG计数方案

OKNG计数方案 1. 添加图像源 2. 添加圆弧边缘缺陷检测 基本参数 自行绘制ROI,在图像上拖动小圆,圈住被测物 运行参数 边缘类型:选择最强边缘极性:由黑到白 缺陷距离阈值: 10 结果显示 为方便查看,文本显示内容设置为:检测结果:{} 光标移动到{}中间,选择模块状态 执行结果…

DeepSeek开源数学大模型,高中、大学定理证明新SOTA

DeepSeek-Prover-V1.5 通过结合强化学习和蒙特卡洛树搜索,显著提升了证明生成的效率和准确性。 AI 技术与数学发现的进展,正前所未有地交织在一起。 前段时间,著名数学家陶哲轩在牛津数学公开讲座中做了主题为「AI 在科学和数学中的潜力」的主…

利用modelscope下载模型

1. modelscope的简介 ModelScope作为一个先进的“模型即服务”(MaaS)平台,它的核心在于汇聚人工智能领域的尖端模型,降低了在现实世界应用这些前沿技术的门槛。该平台通过ModelScope库展现了其强大功能,这一库专为简化开发者体验而设计&…

CyberLink PowerDVD v23.0解锁版下载和安装教程 (专业蓝光影音播器)

前言 CyberLink PowerDVD 是一款全球专业蓝光影音播放软件,新版全新64位播放引擎,改进了8K超清视频播放、更高分辨率高清视频处理,同时4K视频后期处理还新增了色彩校正、对比度增强、HDR等。另外,新版支持HEIC/HEIF图像格式&…

【vue3动画】基于侦听器的动画

今天没事翻Vue3文档的时候看见一个不错的动画效果,做个记录,以后可能会用到 Vue3文档–基于侦听器的动画效果 //代码 import { ref, reactive, watch } from vue import gsap from gsap const number ref(0) const tweened reactive({number: 0 }) …

实验室、办公室管理系统-计算机毕设Java|springboot实战项目

🍊作者:计算机毕设残哥 🍊简介:毕业后就一直专业从事计算机软件程序开发,至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长:按照需求定制化开发项目、 源…

利用亚马逊云科技Bedrock和LangChain开发AI驱动数据分析平台

项目简介: 小李哥将继续每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿AI技术解决方案,帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践,并应用到自己的日常工作里。 本次介绍的是如何在亚马逊云科技上SageMak…

【Qt】QWidget的styleSheet属性

QWidget的styleSheet属性 通过CSS设置widget的样式。 样式具体描述了界面具体是什么样子的。 CSS (Cascading Style Sheets 层叠样式表) 在进行网页开发的时候,设置网页样式的方式。本⾝属于⽹⻚前端技术. 主要就是⽤来描述界⾯的样式。CSS已经发展多年&#xff0c…

10 个 C# 关键字和功能

在 Stack Overflow 调查中,C# 语言是排名第 5 位的编程语言。它广泛用于创建各种应用程序,范围从桌面到移动设备再到云原生。由于有如此多的语言关键字和功能,对于开发人员来说,要跟上新功能发布的最新信息将是一项艰巨的任务。本…

PYQT实现上传图片,保存图片

代码如下 from PyQt5.QtWidgets import * from PyQt5.QtGui import * from PyQt5.QtCore import * import sysclass MyWindow(QMainWindow):def __init__(self):super(MyWindow, self).__init__()self.setWindowTitle("图片处理")self.setGeometry(200, 200, 500, …

Unity的物理系统

目录 3D 物理系统 主要组件 2D 物理系统 主要组件 物理引擎的选择与应用 物理模拟的控制与优化 Unity中Nvidia PhysX引擎与Box2D引擎在性能和功能上的具体比较是什么? 如何在Unity项目中实现Havok物理引擎,并与PhysX或Box2D引擎结合使用&#xf…

C/C++跳动的爱心代码

系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C圣诞树代码 写在前面 C语言实现简单版的跳动的红色爱心。 语言需求:C语…

pdf翻译成中文的工具有哪些?pdf翻译商务学习两不误

在全球化日益加深的今天,pdf文档的国际交流愈发频繁,但语言障碍却常常让人头疼。 别担心,寻找一款可靠的pdf翻译成中文在线软件,已成为解决这一难题的关键。 今天,就让我们一起探索五款强大的pdf翻译器,它…