Jiahonzheng's Blog

基于 fetch 与 Node.js 的 cookies 持久化

字数统计: 444阅读时长: 1 min
2018/03/05 Share

前端:React Native

后端: Node.js

在实现用户登录态维护时,发现前端在登录成功后得到的登录态信息,在模拟器重开或杀死应用后,无法实现预期的持久化存储。

初步先排查前端封装的 fetch 模块,但由于已正确设置 credentials ,故问题出错点不在前端。

后端,使用的是 express-session 方法,设置了 maxAge ,但没有设置 expires ,在查阅 express-sessionREADME 时,发现没有设置 expires 可能是个潜在的出错点。以下为官方API文档的内容链接。

cookie.expires

cookie.maxAge

在设置好 expires 后,不管是重开模拟器还是杀死应用,用户的登录态性能能持久化保存,故问题解决。

但出错的具体原因,仍在研究与学习,后续跟进。

最终实现

关于对 fetch 的具体使用方法,可点击以下链接跳转。

Using Fetch - Web APIs | MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// request.js
// React Native 网络模块的封装
const request = (url, method, body) => {
let isOk;

// 使用了 Prmosise 的构造函数模式,有点违背 Promise 的设计原则
// 待日后调整,现在先将就使用
return new Promise((resolve, reject) => {
fetch(url, {
// 前端持久化 cookies 的关键
// 同域请求使用 same-origin
// 跨域请求使用 include
credentials: "same-origin",
method,
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=utf-8"
},
// 注意这里需要使用 strigify 方法
body: JSON.stringify(body)
})
.then(response => {
isOk = response.ok;

return response.json();
})
.then(responseData => {
if (isOk) {
resolve(responseData);
} else {
reject(responseData);
}
})
.catch(error => {
reject(error);
});
});
};

export default request;

// express-session 的设置
app.use({
secret: "sessionSignedSecret",
saveUninitialized: false,
resave: false,
// 设置 maxAge
// 注意时间值均以毫秒为单位
maxAge: 2592000000,
// 设置 expires
expires: new Date(new Date.now() + 2592000000)
})
CATALOG
  1. 1. 最终实现