微信小程式模擬之cookie 教程

2022-09-24 01:54:11 字數 3032 閱讀 3955

現有系統已經有一套完整的介面,使用者狀態、驗證都是基於cookie的。

部分業務要上小程式版本,眾所周知,微信小程式不支援cookie的。要上線的業務,最好的方式還是基於現有這套介面做,改動不大,也最快。

通過瀏覽器的開發工具,network欄檢視請求,瀏覽器中的cookie會攜帶在每個http的request headers裡面,用cookie作為鍵名。

那麼,在微信官方請求方式wx.request中,我們設定header,新增乙個cookie應該可以得以模擬。

問題又來了,怎麼獲取到伺服器返回的cookie呢。

通過登入介面(登入的時候,伺服器端會植入 cookie 作為 session),檢視http返回頭。

wx.request(

}})拿到cookie存入本地中,下次請求資料的時候直接塞進去,完美。

原本以為cookie只需要一進一出就可以完美模擬,實際操作才發現,攜帶上去的cookie伺服器無法識別。

伺服器返回的cookie中,會攜帶上很多儲存用的字段,例如path=/;

// 伺服器放回的 cookie

// 模擬的是需要的格式樣式

let virtualcookie = 'userkey=1234567890; username=111111; userid=111;';媽耶~要怎麼過濾呢。

簡單粗糙的寫了乙個過濾方案。

// cookie 的本地儲存位置

const cookie_key = '__cookie_key__';

/** * 格式化使用者需要的 cookie

*/const normalizeusercookie = (cookies = '') =>

});wx.setstoragesync(cookie_key, __cookies.join(' '));

};csrftoken是接下來配合egg.js用的,path=/;在某些應用下會是path=/;

normalizeusercookie主要是過濾了xx=***;這樣的資料,然後排除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的版本。

可能與實際開發有點出入,適當修改。

// cookie 的本地儲存位置

const cookie_key = '__cookie_key__';

// csrftoken 的本地儲存位置

const csrf_token_key = '__csrf_token__';

/** * 清除使用者cookie

*/export const cleanusercookie = () =>

/** * 格式化使用者需要的 cookie

* @param cookies

*/export const normalizeusercookie = (cookies = '') =>

});wx.setstoragesync(cookie_key, __cookies);

};/**

* 格式化 token

*/const normalizecsrftoken = () =>

// 脫水

return __key.replace(/;$/, '').replace(/^csrftoken=/, '');

};/**

* 儲存 csrf 的cookie

* 不一定每次請求都會更新 cookie

* @param cookie

*/const sevecsrftokencookie = (cookie) =>

};/**

* 請求資料

* @param opt

*/export const doajax = (opt) => ;`);

// 設定請求頭部

opt.header = object.assign(

,opt.header || {}

);opt.success = (data) =>

resolve(data.data);

} else

};opt.fail = (err) => ;

opt.url = `$$`;

wepy.request(opt);

});};

微信小程式之canvas

initcanvas 複製 rem px 複製 opt.x opt.y x,y是矩形的起點 opt.w opt.h w,h是矩形的寬高 opt.color 顏色 ffffff opt.opacity 透明度 1 opt.fill 是否填充 false drawrect opt else ctx.re...

微信 之小程式支付

二 小程式支付的互動圖 三 在商戶平台新增授權申請單 四 在小程式後台 m a授權 七 後台引數配置 八 具體 實 package 小程式傳給後台的prepay id,signtype md5 wx.requestpayment fail function res complete function...

微信小程式之 問題

1.如何定義全域性資料 2.如何實現 的復用 函式的復用 test.js test function module.exports other.js var common require test.js page 模板 template name odd view odd view template...