這是在講關於一名叫 Koa 的全端勇士傳說-koa-session

前言

接下來將會講解 session 這是一個非常重要的插件,舉凡登入驗證都需要這個套件

起手式

首先要先來安裝 koa-session 套件

1
npm install koa-session

其實在官方文件下面已經有基本的 Example 可以讓我們參考,我們只需要引入套件並複製貼上即可

我順便把註解給翻譯成中文,這樣會比較清楚相關設置 (以下都是 Google 翻譯配合人翻)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const session = require('koa-session');

app.keys = ['some secret hurr']; // 這行是要生成 cookie 時使用的,也就是下方其中一個選項 signed 所需要

const CONFIG = {
key: 'koa:sess', /** cookie 金鑰 (string) (預設: koa:sess) */
/** (number || 'session') maxAge 是以毫秒為單位(1000 = 1 秒) (預設: 1 天) */
/** 'session' 的相關設置將會影響到關閉瀏覽器清除 cookie or session */
/** 注意: session cookie 若被竊取, 將會導致永不過期的問題 */
maxAge: 86400000,
autoCommit: true, /** (boolean) 自動提交 header 資訊 (預設: true) */
overwrite: true, /** (boolean) 可覆蓋若不覆蓋 (看不懂意思) (預設: true) */
httpOnly: true, /** (boolean) 是否開啟 httpOnly,也就是要不要給 JavaScript 讀取 (預設: true) */
signed: true, /** (boolean) 是否附上簽名 (看不懂意思) (預設: true) */
rolling: false, /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (看不懂意思) (預設: is false) */
renew: true, /** (boolean) 是否 session 即將到期時自動更新,也就是瀏覽器重新整理後會自動給予新的 session (建議給 true) (預設: is false)*/
};

app.use(session(CONFIG, app));

使用方式

接下來我們就可以嘗試傳送表單資訊並存入 session 中嘗試看看,首先我們要改一下原本的 router

1
2
3
4
5
6
router.post('/post', async (ctx, next) => {
ctx.session.email = ctx.request.body.email;
ctx.session.name = ctx.request.body.name;
console.log(ctx.session);
ctx.redirect('/');
});

如果出現 Error: .keys required for signed cookies 代表有可能你缺少這一行

1
app.keys = ['some secret hurr'];

如果沒有問題我們可以嘗試將表單資料 post 看看,如果 session 正常的話,將會看到剛剛 post 的資料被儲存至 session 中

session

接下來你可能會問 cookie 呢?其實 koa 本身就已經使用了 cookie 模組,所以並不需要另外安裝,它都是包裝在 ctx 中,若要使用的話就如下

1
2
ctx.cookies.set // 寫入 cookie
ctx.cookies.get // 讀取 cookie

那設置 ctx.cookie.set 也可以做一些設置,幫助我們 cookie 時效、路徑、是否開給 JavaScript 讀取等等,範例如下

1
2
3
4
5
6
7
8
9
cookieSet = {
domain: 'localhost', // cookie 寫入的域名
path: '/index', // 寫入 cookie 的路徑
maxAge: 10 * 60 * 1000, // cookie 時效
expires: new Date('2017-02-15'), // cookie 失效日期
httpOnly: false, // 是否開給 JavaScript 讀取
overwrite: false // 是否允許覆蓋
}
ctx.cookies.set('cid','Ray', cookieSet);

cookie

但是要注意一件事情 cookies 不能設置中文的值,例如 ctx.cookies.set('cid','王小明', cookieSet); 這會出現值錯誤

TypeError: argument value is invalid

如果要解決這個問題的話,可以使用編碼的方式來解決,最簡單的方式就是使用 encodeURIComponent

1
ctx.cookies.set('cid',encodeURIComponent('Ray'), cookieSet);

只是解碼時就要使用 decodeURIComponent

1
decodeURIComponent(ctx.cokkies.get('cid'))

補充

最後補充有可能會有人以為 cookie 就沒套件這種東西,其實是有的,所以最後這邊也一併附上 koa-cookie 套件連結

套件連結

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ