微信小程序模拟cookie的实现

开发背景

现有系统已经有一套完整的接口，用户状态、验证都是基于 cookie 的。

部分业务要上小程序版本，众所周知，微信小程序不支持 cookie 的。要上线的业务，最好的方式还是基于现有这套接口做，改动不大，也最快。

模拟 cookie

通过浏览器的开发工具，Network 栏查看请求，浏览器中的 cookie 会携带在每个 http 的 Request Headers 里面，用 Cookie 作为键名。

那么，在微信官方请求方式 wx.request 中，我们设置 header，添加一个 Cookie 应该可以得以模拟。

问题又来了，怎么获取到服务器返回的 cookie 呢。

通过登录接口(登录的时候，服务器端会植入 cookie 作为 session)，查看 http 返回头。

wx.request({  url: '/api/login',  success: (data) => {    if(data.statusCode === 200) {      console.log(data);      // data 中应该会有 Set-Cookie 或 set-cookie 的字样，嗯，那就是服务器种下的 cookie    }  }})

拿到 cookie 存入本地中，下次请求数据的时候直接塞进去，完美。

格式化 cookie

原本以为 cookie 只需要一进一出就可以完美模拟，实际操作才发现，携带上去的 cookie 服务器无法识别。

服务器返回的 cookie 中，会携带上很多储存用的字段，例如 path=/;

// 服务器放回的 cookielet cookie = 'userKey=1234567890; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT; HttpOnly,userId=111; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT,nickName=; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT,userName=111111; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT,imgUrl=; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT';// 模拟的是需要的格式样式let virtualCookie = 'userKey=1234567890; userName=111111; userId=111;';

妈耶~要怎么过滤呢。

简单粗糙的写了一个过滤方案。

// cookie 的本地存储位置const COOKIE_KEY = '__cookie_key__';/** * 格式化用户需要的 cookie */const normalizeUserCookie = (cookies = '') => {  let __cookies = [];  (cookies.match(/([/w/-.]*)=([^/s=]+);/g) || []).forEach((str) => {    if (str !== 'Path=/;' && str.indexOf('csrfToken=') !== 0) {      __cookies.push(str);    }  });  wx.setStorageSync(COOKIE_KEY, __cookies.join(' '));};

csrfToken 是接下来配合 Egg.js 用的，Path=/; 在某些应用下会是 path=/;

normalizeUserCookie 主要是过滤了 xx=xxx; 这样的数据，然后排除 path=/; 这样无意义的数据。

在登录接口的时候，存上 cookie，在接下来的请求中带上，那么，应该、没错、可能、可以模拟了。

配合 Egg.js

Egg 内置的 egg-security 插件默认对所有『非安全』的方法，例如 POST，PUT，DELETE 都进行 CSRF 校验。