文章目录
- 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.com | a=100; b=200 |
www.bilibili.com | xid=1020abce121; hm=112411213 |
jd.com | x=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的区别主要有如下几点:
- 存在的位置
cookie:浏览器端。
session:服务端。 - 安全性
cookie是以明文的方式存放在客户端的,安全性相对较低。
session存放于服务器中,所以安全性相对较好。 - 网络传输量
cookie设置内容过多会增大报文体积,会影响传输效率。
session数据存储在服务器,只是通过cookie传递id,所以不影响传输效率。 - 存储限制
浏览器限制单个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地址。