【前端】NodeJS：会话控制

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的区别主要有如下几点：

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地址。