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

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，如果验证成功，就向客户端返回请求的数据

例子实现

前台

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div><input v-model="username"/> <input v-model="password"/></div>
    <div>
        <button @click="login">登陆</button>
        <button @click="logout">退出</button>
        <button @click="getUser" >获取用户</button>
    </div>
    <div>
        <button @click="logs=[]">清除页面</button>
    </div>  
    <ul>
        <li v-for="(log,idx) in logs" :key="idx"> {{ log }}</li>
    </ul>
</div>
<script>
    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");
            }
        }
    });
</script>
</body>
</html>

后台代码

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