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

發表於 更新於 分類於
接下來將會講解 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 套件連結

套件連結