微信小程式模擬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);
  });
};

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

微信小程序 Page（）函數的介紹

微信小程式中wx:for和wx:for-item的用法

##

以上是微信小程式模擬cookie的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！