【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序模擬cookie的實(shí)現(xiàn)方法

【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序模擬cookie的實(shí)現(xiàn)方法

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序模擬cookie的實(shí)現(xiàn)方法，在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。開發(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的RequestHeaders里面，用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ù)器放回的

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;';媽耶~要怎么過(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)該、沒錯(cuò)、可能、可以模擬了。配合Egg.jsEgg內(nèi)置的egg-security插件默認(rèn)對(duì)所有『非安全』的方法，例如POST，PUT，DELETE都進(jìn)行CSRF校驗(yàn)。Egg.js雖然可以在配置中關(guān)閉CSRF，但是，如果一定要使用呢？首先，要弄明白一件事，csrfToken怎么來(lái)的。經(jīng)過(guò)多次驗(yàn)證得知，當(dāng)http請(qǐng)求時(shí)，在約定位置沒有攜帶上csrfToken值，此次請(qǐng)求會(huì)在返回的cookie中攜帶上一個(gè)新的csrfToken；當(dāng)本次請(qǐng)求已攜帶上值，就不會(huì)產(chǎn)生成csrfToken。當(dāng)約定位置帶上的csrfToken與cookie里面的csrfToken一致時(shí)，通過(guò)驗(yàn)證。接上面的格式化用戶需要的cookie操作，先拋開csrfToken單獨(dú)處理用戶狀態(tài)等。在每次請(qǐng)求結(jié)束后，試著單獨(dú)拿cookie中可能存在的csrfToken，有值就緩存，沒值跳過(guò)用舊值。封裝一個(gè)Ajax本次小程序是基于wepy的，所以使用了優(yōu)化后的wepy.request;基于Egg.js的版本?？赡芘c實(shí)際開發(fā)有點(diǎn)出入，適當(dāng)修改。import

wepy

from

'wepy';

export

const

HTTP_HOST

=

':3000';

export

const

HTTP_HOST_API

=

`${HTTP_HOST}/api/wxmp`;

//

cookie

的本地存儲(chǔ)位置

const

COOKIE_KEY

=

'__cookie_key__';

//

csrfToken

的本地存儲(chǔ)位置

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

*

不一定每次請(qǐng)求都會(huì)更新

cookie

*

@param

{String}

cookie

*/

const

seveCsrfTokenCookie

=

(cookie)

=>

{

if

(cookie)

{

wx.setStorageSync(CSRF_TOKEN_KEY,

cookie);

}

};

/**

*

請(qǐng)求數(shù)據(jù)

*

@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};`);

//

設(shè)置請(qǐng)求頭部

opt.header

=

Object.assign(

{

'x-csrf-token':

csrf,

Cookie:

Cookies.join('

')

},

opt.header

||

{}

);

opt.success

=

(data)

=>

{

seveCsrfTokenCookie(data.header['set-cookie']);

//

統(tǒng)一操作

if

(data.statusCode

==

200)

{

if

(url

===

'/login')

{

normalizeUserCookie(data.header['set-cookie']);

}

resolve(data.data);

}

else

{

reject('未知錯(cuò)誤，請(qǐng)重試一次');

}