在使用 Cookie + Session 实现鉴权功能之前，先来看看 Cookie 和 Session 是什么。

Cookie 是什么

cookie服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。它通常用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。

Cookie 的原理

当浏览器首次向服务器发送请求的时候，服务器会生成一份 cookie 数据，以 Set-Cookie 消息头的方式发送给客户端，浏览器一般都会自动将 cookie 数据存储起来。当浏览器再次访问同一服务器时，会以 Cookie 消息头的方式携带cookie数据发送给服务器，服务端就可以根据 cookie 数据来识别用户的身份或进行一些特别的处理并返回响应。

Session 是什么

Session字面含义就是会话。由于HTTP是无状态协议，为了保持浏览器与服务器之间的联系，才有了Session。Session就是用于在服务器端保存用户状态的协议。通常用来保存用户的登录状态。

Session 原理

  1. 客户端首次访问服务器时，服务器创建 Session，然后保存（Session 是保存在服务器端，通常是保存在内容中，当然也可以保存在文件、数据库等），然后给这个 Session 生成一个唯一的标识字符串，将 SessionId 设置到 Set-Cookie 响应头里
  2. 签名：通过md5等加密算方法对 SessionId 进行签名处理，这是为了避免客户端通过 document.cookie 修改 SessionId。（非必需步骤）
  3. 浏览器收到请求响应后会解析响应头，然后将SessionId 保存到 Cookie 中，以后的每次HTTP请求，SessionId 都会随着 Cookie 被传递到服务器。
  4. 服务器通过解析请求头 Cookie 中的SessionId，然后根据这个 SessionId 取到对应的Session信息，判断这个请求来自于哪个客户端/用户，从而判断该请求是否合法。

客户端

image.png
前端页面如上图

Login: 点击Login 按钮，将用户名和密码发送到服务端，服务端创建 session 并保存
Logout：点击 Logout 按钮，将清空 session
GetUser：点击 GetUser 按钮，从 session 中获取用户信息

前端代码如下：

  1. <html>
  3. <head>
  4.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5.   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  6.   <!-- 引入样式 -->
  7.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.   <!-- 引入组件库 -->
  9.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  10. </head>
  12. <body>
  13.   <div id="app">
  14.     <el-row style="margin-top: 15px ;">
  15.       <el-input v-model="username" placeholder="请输入用户名"></el-input>
  16.     </el-row>
  17.     <el-row style="margin-top: 15px ;">
  18.       <el-input v-model="password" show-password placeholder="请输入密码"></el-input>
  19.     </el-row>
  21.     <el-row style="margin-top: 15px ;">
  22.       <el-button type="primary" plain v-on:click="login" size="small">Login</el-button>
  23.       <el-button type="primary" plain v-on:click="logout" size="small">Logout</el-button>
  24.       <el-button type="primary" plain v-on:click="getUser" size="small">GetUser</el-button>
  25.       <el-button plain onclick="document.getElementById('log').innerHTML = ''" size="small">Clear Log</el-button>
  26.     </el-row>
  27.   </div>
  28.   <h6 id="log"></h6>
  29.   </div>
  31.   <style>
  32.     .el-input {
  33.       width: 400px;
  34.     }
  35.   </style>
  37.   <script>
  38.     // axios.defaults.baseURL = 'http://localhost:3000'
  39.     axios.defaults.withCredentials = true
  40.     axios.interceptors.response.use(
  41.       response => {
  42.         document.getElementById('log').append(JSON.stringify(response.data))
  43.         return response;
  44.       }
  45.     );
  46.     var app = new Vue({
  47.       el: '#app',
  48.       data: {
  49.         username: 'test',
  50.         password: 'test'
  51.       },
  52.       methods: {
  53.         async login() {
  54.           await axios.post('/login', {
  55.             username: this.username,
  56.             password: this.password
  57.           })
  58.         },
  59.         async logout() {
  60.           await axios.post('/logout')
  61.         },
  62.         async getUser() {
  63.           await axios.get('/getUser')
  64.         }
  65.       }
  66.     });
  67.   </script>
  68. </body>
  70. </html>

服务端

服务器端使用 koa 框架来创建，使用 koa-session 中间件来管理 cookie 和 session，将session 保存在 cookie 中。

我们实现一个中间件，用来实现鉴权的功能

  1. // 实现一个中间件，实现鉴权功能
  2. app.use((ctx, next) => {
  3.   if (ctx.url.indexOf('login') > -1) {
  4.     // 登录
  5.     next()
  6.   } else {
  7.     console.log('session', ctx.session.userinfo)
  8.     if (!ctx.session.userinfo) {
  9.       ctx.body = {
  10.         message: "登录失败"
  11.       }
  12.     } else {
  13.       // 用户已经登录成功，执行下一个中间件
  14.       next()
  15.     }
  16.   }
  17. })

下面是服务端完整代码：

  1. const Koa = require('koa')
  2. const router = require('koa-router')()
  3. const session = require('koa-session')
  4. const cors = require('koa2-cors')
  5. const bodyParser = require('koa-bodyparser')
  6. const static = require('koa-static')
  7. const app = new Koa();
  9. // 跨域请求处理
  10. app.use(cors({
  11.   credentials: true
  12. }))
  13. app.keys = ['some secret'];
  14. app.use(static(__dirname + '/'));
  15. app.use(bodyParser())
  16. //配置session的中间件
  17. app.use(session(app));
  19. // 实现一个中间件，实现鉴权功能
  20. app.use((ctx, next) => {
  21.   if (ctx.url.indexOf('login') > -1) {
  22.     // 登录
  23.     next()
  24.   } else {
  25.     console.log('session', ctx.session.userinfo)
  26.     if (!ctx.session.userinfo) {
  27.       ctx.body = {
  28.         message: "登录失败"
  29.       }
  30.     } else {
  31.       // 用户已经登录成功，执行下一个中间件
  32.       next()
  33.     }
  34.   }
  35. })
  37. router.post('/login', async (ctx) => {
  38.   const {
  39.     body
  40.   } = ctx.request
  41.   console.log('body', body)
  42.   // 登陆成功，创建Session并保存
  43.   ctx.session.userinfo = body.username;
  44.   ctx.body = {
  45.     message: "登录成功"
  46.   }
  47. })
  48. router.post('/logout', async (ctx) => {
  49.   // 登出系统后，清除 Session
  50.   delete ctx.session.userinfo
  51.   ctx.body = {
  52.     message: "登出系统"
  53.   }
  54. })
  55. router.get('/getUser', async (ctx) => {
  56.   // 从 Session 中获取用户信息
  57.   ctx.body = {
  58.     message: "获取数据成功",
  59.     userinfo: ctx.session.userinfo
  60.   }
  61. })
  63. app.use(router.routes());
  64. app.use(router.allowedMethods());
  65. app.listen(3000);