大部分的微信小程序不支持cookie,,,,,那么微信小程序模拟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 中,,,,,会携带上许多贮存用的字段,,,,,例如 path=/;
// 服务器放回的 cookie let 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 内置的 egg-security 插件默认对所有『非清静』的要领,,,,,例如 POST,,,,,PUT,,,,,DELETE 都举行 CSRF 校验。。。。。。
Egg.js 虽然可以在设置中关闭 CSRF,,,,,可是,,,,,若是一定要使用呢?????
首先,,,,,要弄明确一件事,,,,,csrfToken 怎么来的。。。。。。
经由多次验证得知,,,,,当 http 请求时,,,,,在约定位置没有携带上 csrfToken 值,,,,,此次请求会在返回的 cookie 中携带上一个新的 csrfToken;;;;;;当本次请求已携带上值,,,,,就不会发天生 csrfToken。。。。。。当约定位置带上的 csrfToken 与 cookie 内里的 csrfToken 一致时,,,,,通过验证。。。。。。
接上面的 名堂化用户需要的 cookie 操作,,,,,先抛开 csrfToken 单独处理用户状态等。。。。。。
在每次请求竣事后,,,,,试着单独拿 cookie 中可能保存的 csrfToken,,,,,有值就缓存,,,,,没值跳过用旧值。。。。。。
本次小程序是基于 wepy 的,,,,,以是使用了优化后的 wepy.request;
基于 Egg.js 的版本。。。。。。
可能与现实开发有点收支,,,,,适当修改。。。。。。
import wepy from 'wepy';
export const HTTP_HOST = 'http://127.0.0.1:3000';
export const HTTP_HOST_API = `${HTTP_HOST}/api/wxmp`;
// cookie 的外地存储位置
const COOKIE_KEY = '__cookie_key__';
// csrfToken 的外地存储位置
const CSRF_TOKEN_KEY = '__csrf_token__';
/**
* 扫除用户Cookie
*/
export const cleanUserCookie = () => {
wx.setStorageSync(COOKIE_KEY, '');
}
/**
* 名堂化用户需要的 cookie
* @param {String} cookies
*/
export 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);
};
/**
* 名堂化 token
*/
const normalizeCsrfToken = () => {
let __value = wx.getStorageSync(CSRF_TOKEN_KEY) || '';
let __inputs = __value.match(/csrfToken=[\S]*/) || [];
let __key = __inputs[0]; // csrfToken=1212132323;
if (!!!__key) {
return '';
}
// 脱水
return __key.replace(/;$/, '').replace(/^csrfToken=/, '');
};
/**
* 生涯 csrf 的cookie
* 纷歧定每次请求都会更新 cookie
* @param {String} cookie
*/
const seveCsrfTokenCookie = (cookie) => {
if (cookie) {
wx.setStorageSync(CSRF_TOKEN_KEY, cookie);
}
};
/**
* 请求数据
* @param {Object} opt
*/
export const doAjax = (opt) => {
return new Promise((resolve, reject) => {
let Cookies = wx.getStorageSync(COOKIE_KEY) || [];
let csrf = normalizeCsrfToken();
let url = opt.url;
// 整理 Cookie
Cookies.push(`csrfToken=${csrf};`);
// 设置请求头部
opt.header = Object.assign(
{
'x-csrf-token': csrf,
Cookie: Cookies.join(' ')
},
opt.header || {}
);
opt.success = (data) => {
seveCsrfTokenCookie(data.header['set-cookie']);
// 统一操作
if (data.statusCode == 200) {
if (url === '/login') {
normalizeUserCookie(data.header['set-cookie']);
}
resolve(data.data);
} else {
reject('未知过失,,,,,请重试一次');
}
};
opt.fail = (err) => {
reject(err);
};
opt.url = `${HTTP_HOST_API}${opt.url}`;
wepy.request(opt);
});
};
KESION 金狮贵宾会软件
KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。。KESION 一直通过手艺立异,,,,,提供产品和服务,,,,,助力企业向数字化转型,,,,,通过科技驱动商业刷新,,,,,让商业变得更智慧!
微信小程序电商模板为各人介绍一般的电商小程序都有哪些模????椋,,,,以及这些模????橐跹⒅谱鞒隼。。。。。。...
小程序 的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的,,,,,都是跳转到一个全新的页面,,,,,当这个页面是表单的时间,,,,,有时间需要跳转到其它页面选守信息后再跳转回来,,,,,那之前填