pp电子

登录
免费开通

微信小程序模拟cookie的实现

大部分的微信小程序不支持cookie,,,,,,那么微信小程序模拟cookie的实现要怎样开发,,,,,,下面为各人带来微信小程序模拟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 服务器无法识别 。。。。。。

服务器返回的 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.js

Egg 内置的 egg-security 插件默认对所有『非清静』的要领,,,,,,例如 POST,,,,,,PUT,,,,,,DELETE 都举行 CSRF 校验 。。。。。。

Egg.js 虽然可以在设置中关闭 CSRF,,,,,,可是,,,,,,若是一定要使用呢?? ??

首先,,,,,,要弄明确一件事,,,,,,csrfToken 怎么来的 。。。。。。

经由多次验证得知,,,,,,当 http 请求时,,,,,,在约定位置没有携带上 csrfToken 值,,,,,,此次请求会在返回的 cookie 中携带上一个新的 csrfToken;;当本次请求已携带上值,,,,,,就不会发天生 csrfToken 。。。。。。当约定位置带上的 csrfToken 与 cookie 内里的 csrfToken 一致时,,,,,,通过验证 。。。。。。

接上面的 名堂化用户需要的 cookie 操作,,,,,,先抛开 csrfToken 单独处理用户状态等 。。。。。。

在每次请求竣事后,,,,,,试着单独拿 cookie 中可能保存的 csrfToken,,,,,,有值就缓存,,,,,,没值跳过用旧值 。。。。。。

封装一个 Ajax

本次小程序是基于 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);
    });
};

微信小程序模拟cookie的实现


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,,,若有知识产权人并不肯意我们使用,,,,,,若是有侵权请连忙联系 。。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,,,仅系客观性形貌,,,,,,如您需要相识该类商品/服务详细的资讯,,,,,,请您直接与该类商品/服务的提供者联系 。。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案 。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等 。。。。。。

KESION 一直通过手艺立异,,,,,,提供产品和服务,,,,,,助力企业向数字化转型,,,,,,通过科技驱动商业刷新,,,,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇
  • 微信小程序电商模板,微信电商小程序开发

  • 小程序——带参返回上一页几种要领

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序模拟cookie的实现 - KESION pp电子