关于cookies,session,token的使用
可以使用postman测试数据!
- cookies的使用
// 把请求头中的cookie解析到req.cookies中
var cookieParser = require('cookie-parser');
app.use(cookieParser());
//获取cookie
//在服务端获取cookie:当浏览器保存了cookie之后,再次请求的时候,会自动把cookie放在请求头中发送给服务端
//方式一:req.headers.cookie(这样获取的cookie只是字符串)
//方式二:通过cookie-parser获取,req.cookies(获取的cookies是对象)
app.get('/login',(req,res)=>{
//设置cookie
//方式一
// res.setHeader('Set-Cookie','username=Tom,age=12');
//方式二
res.cookie('username', req.query.username,{
// maxAge 设置cookie的有效期,时间单位是毫秒,有效期:可以理解为保质期
// 1、没有设置有效期的cookie就没有保质期,cookie的有效时间是从创建cookie到浏览器关闭
// 2、设置了有效期的cookie就做持久化cookie,及时关闭了浏览器,浏览器依然会保存cookie直至过了有效期
maxAge: 1000*60*60,
});
res.redirect('/')
})
// 退出登录
app.get('/logout', (req, res)=>{
// 删除cookie
res.clearCookie('username');
res.redirect('/');
});
- session的使用
//默认Session数据时内存储数据,服务器一旦重启,真正的生产环境会把Session进行持久化存储。
//配置
var session=require('express-session')
var md5 = require('blueimp-md5');
//该插件会为req请求对象添加一个成员:req.session默认是一个对象
//这是最简单的配置方式
//Session是基于Cookie实现的
app.use(session({
//配置加密字符串,他会在原有的基础上和字符串拼接起来去加密,使用md5(xxxx)的形式加密
//目的是为了增加安全性,防止客户端恶意伪造
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,//无论是否适用Session,都默认直接分配一把钥匙
cookie: { secure: true }
}))
//使用
// 读
//添加Session数据
//session就是一个对象
req.session.foo = 'bar';
//写
//获取session数据
req.session.foo
//删
req.session.foo = null;
delete req.session.foo
- token的使用
//在SPA页面上,可以用token和路由导航守卫来阻止用户在URL地址输入直接跳转到有权限的页面
token.js
//1.安装jwt(jsonwebtoken)
//2.使用jwt中的两个方法来加密和解密token
const jwt=require('jsonwebtoken');
Token={
en(str){//加密token
let tokenKey=jwt.sign(str,'apache');
return tokenKey;
},
de(token){//解密Token
try{
let tokenKey=jwt.verify(token,'apache');
return {
status:'success',
tokenKey
}
}
catch{
return{
status:'failed'
}
}
}
}
module.exports=Token;
app.js
const express=require('express');
const app=express();
const Token=require('./token');
//注册
app.post('/',(req,res)=>{
let {username,password}=req.query;
//模拟进行了数据库的操作
let id='6FGK908P1MK';
let tokenKey=Token.en(id);
return res.send({
msg:'操作成功',
status:200,
tokenKey
})
})
//登录
app.get('/',(req,res)=>{
let {TokenKey} =req.query;
let data=Token.de(TokenKey);
return res.send({
msg:'数据操作成功',
status:200,
data
})
})
app.listen(3000,()=>{
console.log('服务器3000...')
})
//上面的例子中注册时,就返回token了,实际开发中应该是下面的方式
-用户注册时,先把用户名和密码添加到数据库,然后会生成一个Id
-用户登录时,判断用户名和密码,然后使用加密字符串和id返回给用户一个token,然后客户端将token存放到sessionstorage中
-用户访问权限页面时,就把sessionstrage中的token放到headers中
Login.vue
//使用了Elment-UI中的表单组件
methods:{
login(){
//判断是否可以成功提交表单
this.$refs.loginFormRef.validate(async valid=>{
if(!valid) return;
const {data:res}=await this.$http.post("login",this.loginForm);
if(res.meta.status!==200) return this.$message.error('登录失败!');
this.$message.success('登录成功!');
//1. 将登录成功之后的token,保存到客户端的sessionStorage中
//1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问
//1.2 token只应在当前网站打开期间生效,所以将token保存在sessionStorage中
window.sessionStorage.setItem("token",res.data.token);
//2.通过编程式导航跳转到后台主页,路由地址是/home
this.$router.push("/home");
})
}
}