開發(fā)背景
現(xiàn)有系統(tǒng)已經(jīng)有一套完整的接口,用戶狀態(tài)、驗(yàn)證都是基于 cookie 的。
部分業(yè)務(wù)要上小程序版本,眾所周知,微信小程序不支持 cookie 的。要上線的業(yè)務(wù),最好的方式還是基于現(xiàn)有這套接口做,改動(dòng)不大,也最快。
模擬 cookie
通過(guò)瀏覽器的開發(fā)工具,Network 欄查看請(qǐng)求,瀏覽器中的 cookie 會(huì)攜帶在每個(gè) http 的 Request Headers 里面,用 Cookie 作為鍵名。
那么,在微信官方請(qǐng)求方式 wx.request 中,我們?cè)O(shè)置 header,添加一個(gè) Cookie 應(yīng)該可以得以模擬。
問(wèn)題又來(lái)了,怎么獲取到服務(wù)器返回的 cookie 呢。
通過(guò)登錄接口(登錄的時(shí)候,服務(wù)器端會(huì)植入 cookie 作為 session),查看 http 返回頭。
wx.request({ url: '/api/login', success: (data) => { if(data.statusCode === 200) { console.log(data); // data 中應(yīng)該會(huì)有 Set-Cookie 或 set-cookie 的字樣,嗯,那就是服務(wù)器種下的 cookie } }})拿到 cookie 存入本地中,下次請(qǐng)求數(shù)據(jù)的時(shí)候直接塞進(jìn)去,完美。
格式化 cookie
原本以為 cookie 只需要一進(jìn)一出就可以完美模擬,實(shí)際操作才發(fā)現(xiàn),攜帶上去的 cookie 服務(wù)器無(wú)法識(shí)別。
服務(wù)器返回的 cookie 中,會(huì)攜帶上很多儲(chǔ)存用的字段,例如 path=/;
// 服務(wù)器放回的 cookielet 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;';
媽耶~要怎么過(guò)濾呢。
簡(jiǎn)單粗糙的寫了一個(gè)過(guò)濾方案。
// cookie 的本地存儲(chǔ)位置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 是接下來(lái)配合 Egg.js 用的,Path=/; 在某些應(yīng)用下會(huì)是 path=/;
normalizeUserCookie 主要是過(guò)濾了 xx=xxx; 這樣的數(shù)據(jù),然后排除 path=/; 這樣無(wú)意義的數(shù)據(jù)。
在登錄接口的時(shí)候,存上 cookie,在接下來(lái)的請(qǐng)求中帶上,那么,應(yīng)該、沒(méi)錯(cuò)、可能、可以模擬了。
配合 Egg.js
Egg 內(nèi)置的 egg-security 插件默認(rèn)對(duì)所有『非安全』的方法,例如 POST,PUT,DELETE 都進(jìn)行 CSRF 校驗(yàn)。
|
新聞熱點(diǎn)
疑難解答
圖片精選