目录
什么是会话控制
- cookie
- session
- token
cookie
cookie 是什么
cookie 的特点
cookie 的运行流程
有了 cookie 之后,后续向服务器发送请求时,就会自动携带 cookie
浏览器操作 cookie
不同浏览器之间cookie不共享
express框架中设置cookie
1、初始化
npm init
2、安装express
npm i express
代码:
//导入express
const express=require('express');
const cookieParser = require('cookie-parser')
//创建应用对象
const app = express();
app.use(cookieParser())
//创建路由规则
app.get('/set-cookie',(req,res)=>{
// res.cookie('name','zhangsan'); //此设置cookie会在浏览器关闭时,销毁
res.cookie('name','lisi',{maxAge:60*1000}) //max最大 age年龄 (最大的保存生命周期)例子:七天免登陆
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);
课程代码:
const express =require('express');
//1. 安装 cookie-parser npm i cookie-parser
//2. 引入 cookieParser 包
const cookieParser = require('cookie-parser');
const app = express();
//3. 设置 cookieParser 中间件
app.use(cookieParser());
//4-1 设置 cookie
app.get('/set-cookie', (request, response) => {
// 不带时效性
response.cookie('username','wangwu');
// 带时效性
response.cookie('email','23123456@qq.com', {maxAge: 5*60*1000 });
//响应
response.send('Cookie的设置');
});
//4-2 读取 cookie
app.get('/get-cookie', (request, response) => {
//读取 cookie
console.log(request.cookies);
//响应体
response.send('Cookie的读取');
});
//4-3 删除cookie
app.get('/delete-cookie', (request, response) => {
//删除
response.clearCookie('username');
//响应
response.send('cookie 的清除');
});
//4. 启动服务
app.listen(3000, () => {
console.log('服务已经启动....');
});
session
session 是什么
session 的作用
session 运行流程
express 中可以使用 express-session 对 session 进行操作
1、安装包
npm i express-session connect-mongo
2、创建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('登陆失败');
}
})
3、读取session
//session读取
app.get('/cart',(req,res)=>{
//检测session是否存在用户数据
if(req.session.username){
res.send(`购物车页面,欢迎您 ${req.session.username}`)
}else{
res.send('您还没登录');
}
})
4、session的销毁
//session的销毁
app.get('/logout',(req,res)=>{
req.session.destroy(()=>{
res.send('退出成功');
})
})
数据库的session变为空
课程代码:
const express = require('express');
//1. 安装包 npm i express-session connect-mongo
//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
resave: true, //是否在每次请求时重新保存session
store: MongoStore.create({
mongoUrl: 'mongodb://127.0.0.1:27017/project' //数据库的连接配置
}),
cookie: {
httpOnly: true, // 开启后前端无法通过 JS 操作
maxAge: 1000 * 300 // 这一条 是控制 sessionID 的过期时间的!!!
},
}))
//创建 session
app.get('/login', (req, res) => {
//设置session
req.session.username = 'zhangsan';
req.session.email = 'zhangsan@qq.com'
res.send('登录成功');
})
//获取 session
app.get('/home', (req, res) => {
console.log('session的信息');
console.log(req.session.username);
if (req.session.username) {
res.send(`你好 ${req.session.username}`);
}else{
res.send('登录 注册');
}
})
//销毁 session
app.get('/logout', (req, res) => {
//销毁session
// res.send('设置session');
req.session.destroy(() => {
res.send('成功退出');
});
});
app.listen(3000, () => {
console.log('服务已经启动, 端口 ' + 3000 + ' 监听中...');
});
session 和 cookie 的区别
- cookie:浏览器端
- session:服务端
- cookie 是以明文的方式存放在客户端的,安全性相对较低
- session 存放于服务器中,所以安全性 相对 较好
- cookie 设置内容过多会增大报文体积, 会影响传输效率
- session 数据存储在服务器,只是通过 cookie 传递 id,所以不影响传输效率
- 浏览器限制单个 cookie 保存的数据不能超过 4K ,且单个域名下的存储数量也有限制
- session 数据存储在服务器中,所以没有这些限制
=========================================================================
完善记账本功能
参考项目:accounts
========================================================================
CSRF跨站请求伪造
跨域:ip地址和端口号有一个不一致就叫跨域。
B网站向A网站请求的时候还会携带上A网站的cookies,强制使A网站的用户下线
攻击页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSRF 演示</title>
<link rel="stylesheet" href="http://127.0.0.1:3000/logout">
</head>
<body>
</body>
</html>
解决方法:用post请求(form表单)
退出登录这里能用form表单,post请求,就不会强制退出
因为link、a标签等发送的是get请求。
公益404
Token
token 是什么
token 的作用
token 的工作流程
后续发送请求时,需要手动将 token 添加在请求报文中,一般是放在请求头中
cookies是自动
token 的特点
JWT
npm init -y
npm i jsonwebtoken
实验代码
//导入 jwt
const jwt=require('jsonwebtoken');
//创建(生成)token
// let token=jwt.sign(用户数据,加密字符串,配置对象);
let token = jwt.sign({
username:'zhangsan'
},'aiguigu',{
expiresIn:120, //单位是秒
})
console.log(token);
//校验token
得到token
注意token设置了过期时间,过期了就不能用了,校验失败。(可以设置7天免登录)
//导入 jwt
const jwt=require('jsonwebtoken');
//创建(生成)token
// let token=jwt.sign(用户数据,加密字符串,配置对象);
// let token = jwt.sign({
// username:'zhangsan'
// },'aiguigu',{
// expiresIn:120, //单位是秒
// })
// console.log(token);
let t='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InpoYW5nc2FuIiwiaWF0IjoxNjgzNDQ5NTExLCJleHAiOjE2ODM0NDk2MzF9.dCWMZ4VHY8vvOu6kKkGN_Z7E8CNeaxDcWpOTwZ3zz24';
//校验token
jwt.verify(t,'aiguigu',(err,data)=>{
if(err){
console.log('校验失败');
return
}
console.log(data);
})
扩展阅读:https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
=========================================================================
记账本完善
项目accounts-token
========================================================================
本地域名
操作流程
编辑文件 C:\Windows\System32\drivers\etc\hosts
如果修改失败, 可以修改该文件的权限
原理