学生一枚，作为学习和总结。如果有哪些不对的地方，还请指教

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

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