Tutorial: [基础能力] cookie机制

[基础能力] cookie机制

功能

  • 问题

    • 小程序不支持cookie
    • 后端现有接口很多是先前对接M页/APP开发的，可能会使用cookie进行参数获取/传递，小程序无法直接复用
    • 后端新接口很多时候需要同时供M页和小程序两端使用，一端能用cookie一端不能用cookie，需要进行各种兼容处理

  • 方案

    • 抹平小程序和M页在cookie方面的差异，使得小程序调用后端接口时可以像M页一样使用cookie传参
    • 利用前端storage，自行模拟&管理cookie
    • 封装接口调用过程，自动植入cookie逻辑

  • 效果

    • 前端，可以像M页一样，通过cookie管理跨页面公共基础数据
    • 后端，可以正常使用cookie传参，不需要为小程序单独适配

使用

  1. fancy-mini setup
  2. 引入&配置
  //项目入口文件（app.js/app.wpy/app.vue/main.js/……，因框架而异）
  import './lib/appPlugin';  //负责各种小程序级公共模块的引入和配置

  //appPlugin.js, 负责各种小程序级公共模块的引入和配置
  import Cookie from 'fancy-mini/lib/Cookie';
  import CookiePlugin from 'fancy-mini/lib/request/plugin/CookiePlugin';
  import Requester from "fancy-mini/lib/request/Requester";
  
  //实例创建
  const requester = new Requester(); //请求管理器
  const cookie = new Cookie(); //cookie管理器

  //请求管理器配置
  requester.config({
    plugins: [
      //cookie插件，在请求前后自动加入cookie相关逻辑
      new CookiePlugin({
        cookie,
      }),
    ]
  });
  
  export {
    requester,
    cookie,
  }
  1. 前端读写cookie
  //页面/组件
  import {cookie} from '../../lib/appPlugin';
  
  //写入cookie
  cookie.set('lon', '120');
  
  //读取cookie
  cookie.get('lon'); //'120'
  
  //更多用法详见 api查询 小节
  1. 前端发送请求
  //页面/组件
  import {requester} from '../../lib/appPlugin';
  
  //前端发送接口请求时，要使用步骤1中封装了cookie逻辑的requester触发
  let dataRes = await requester.request({
    url: 'https://xxx',
    data: {
    }
  });
  
  console.log('dataRes:', dataRes);
  1. 后端读写cookie
  //后端使用标准http协议读写cookie，处理方式跟对接M页时保持一致
  //读取cookie：请求内容-头部-读取'cookie'字段
  //写入cookie：返回结果-头部-设置'Set-Cookie'字段

相关

api查询