踩坑：基於 fetch 與 Node.js 的 cookies 持久化

基於 fetch 與 Node.js 的 cookies 持久化

前端：React Native

後端： Node.js

在實現用戶登陸態維護時，發現前端在登陸成功後獲得的登陸態信息，在模擬器重開或殺死應用後，沒法實現預期的持久化存儲。

初步先排查前端封裝的 fetch 模塊，但因爲已正確設置 credentials ，故問題出錯點不在前端。

後端，使用的是 express-session 方法，設置了 maxAge ，但沒有設置 expires ，在查閱 express-session 的 README 時，發現沒有設置 expires 多是個潛在的出錯點。如下爲官方API文檔的內容連接。

cookie.expires

cookie.maxAge

在設置好 expires 後，無論是重開模擬器仍是殺死應用，用戶的登陸態性能能持久化保存，故問題解決。

但出錯的具體緣由，仍在研究與學習，後續跟進。

最終實現

關於對 fetch 的具體使用方法，可點擊如下連接跳轉。

Using Fetch - Web APIs | MDN

// 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)
})
複製代碼