学生一枚,作为学习和总结。如果有哪些不对的地方,还请指教
cookie
诞生
HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。
为解决这个问题,有了cookie出现
cookie介绍
Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),(通知浏览器设置一下cookie),浏览器自动会将Cookie以进行保存(以key/value的形式)。当下次请求同一网站时也会自动发送该Cookie给服务器,即添加在请求头部。
存放在浏览器端
原理即代码实现
const http = require("http")
http.createServer((req, res) => {
// 观察cookie是否存在 如果存在就打印cookie
console.log('cookie:', req.headers.cookie)
// 设置cookie
res.setHeader('Set-Cookie', 'cookie=abc;')
res.end('hello cookie!!')
}).listen(3000)
复制代码
结果展示
为什么会有两次?
第一次 请求的时候 发现没有cookie,就进行了设置
第二次请求,发现有cookie了,就直接输出了
session
基于cookie 实现,存放在服务端
里面只存一个cookieId,其他的保存在服务器中
代码即原理展示
// principle
const http = require("http")
const session = {} // 用来存放cookie
http.createServer((req, res) => {
// 观察cookie存在
console.log('cookie:', req.headers.cookie)
const sessionKey = 'sid'
const cookie = req.headers.cookie
if (cookie && cookie.indexOf(sessionKey) > -1) { // 证明cookie 存在
res.end('Come Back ')
// 简略写法未必具有通用性
const pattern = new RegExp(`${sessionKey}=([^;]+);?\s*`) // 正则表达式对象 判断是否又sid = XX等
console.log(pattern)
const sid = pattern.exec(cookie)[1] // 检索字符串中指定的值。返回找到的值
console.log('session:', sid, session, session[sid])
} else {
const sid = (Math.random() * 99999999).toFixed()
// 设置cookie
res.setHeader('Set-Cookie', `${sessionKey}=${sid};`)
session[sid] = {name: 'oldWang'}
res.end('Hello')
}
res.end('hello cookie!!')
}).listen(3000)
复制代码
分析
浏览器不存在cookie 的时候,走else,随机设置一个sid,(一般是自己设置,尽量麻烦一点),然后 设置cookie, 在session集合中保存用户信息,(一般存到数据库里面), 最后返回结果
第二次进入的时候,会走if ,进行取值判断。
Token
使用原因
Session不足,服务器存在状态
不灵活,(cookie只存在于浏览器)
过程
客户端使用户名跟密码请求登录
服务端收到请求,去验证用户名与密码
验证成功后,服务端会签发一个令牌(Token),再把这个 Token 发送给客户端
客户端收到 Token 以后可以把它存储起来,⽐比如放在 Cookie 里或者 Local Storage ⾥
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回 请求的数据
例子实现
前台
Title登陆
退出
获取用户
清除页面
- {{ log }}
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.withCredentials = true
axios.interceptors.request.use(config => {
const token = window.localStorage.getItem("token");
if (token) {
// 判断是否存在token,如果存在的话,则每个http header都加上token
// Bearer是JWT的认证头部信息
config.headers.common["Authorization"] = "Bearer " + token;
}
return config;
}, err => {
return Promise.reject(err);
});
axios.interceptors.response.use(response => {
app.logs.push(JSON.stringify(response.data));
return response;
}, err => {
app.logs.push(JSON.stringify(response.data));
return Promise.reject(err);
});
var app = new Vue({
el: "#app",
data: {
username: "admin",
password: "admin",
logs: []
},
methods: {
login: async function () {
const res = await axios.post("/users/login-token", {
username: this.username,
password: this.password
});
localStorage.setItem("token", res.data.token);
}, logout: async function () {
this.logs.push('退出登陆')
localStorage.removeItem("token");
}, getUser: async function () {
await axios.get("/users/getUser-token");
}
}
});
复制代码
后台代码
const Koa = require('koa')
const router = require('koa-router')() // koa路由
const jwt = require("jsonwebtoken")
const jwtAuth = require("koa-jwt")
const secret = "it's a secret"
const cors = require('koa2-cors')
// https://www.jb51.net/article/135924.htm 跨域参考
const bodyParser = require('koa-bodyparser') // 不支持table,支持json
const static = require('koa-static')
const app = new Koa();
app.keys = ['some secret'];
app.use(cors({credentials: true})) // 解决跨域
app.use(static(__dirname + '/'));
app.use(bodyParser())
router.post("/users/login-token", async ctx => {
const {body} = ctx.request;
console.log(body)
//登录逻辑,略略
// 设置session
const userinfo = body.username;
ctx.body = {
message: "登录成功", user: userinfo,
// ⽣生成 token 返回给客户端
token: jwt.sign({
data: userinfo,
// 设置 token 过期时间,一⼩小时后,秒为单位
exp: Math.floor(Date.now() / 1000) + 60 * 60
}, secret)
};
})
router.get("/users/getUser-token", jwtAuth({secret}), async ctx => {
// 验证通过,state.user
console.log(ctx.state.user);
//获取session
ctx.body = {message: "获取数据成功", userinfo: ctx.state.user.data};
});
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
复制代码
jsonwebtoken github
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[3种常用鉴权方法原理与实现]http://www.zyiz.net/tech/detail-129918.html