koa2 從入門到進階之路 （七）

之前的文章我們介紹了一下 koa koa-static靜態資源中間件，本篇文章我們來看一下 koa 中 cookie 和 session 的使用。

cookie 是存儲於訪問者的計算機中的變量。可以讓我們用同一個瀏覽器訪問同一個域名的時候共享數據。

HTTP 是無狀態協議。簡單地說，當你瀏覽了一個頁面，然后轉到同一個網站的另一個頁 面，服務器無法認識到這是同一個瀏覽器在訪問同一個網站。每一次的訪問，都是沒有任何關系的。

我們將之前項目中的 app.js 改為如下代碼：

//引入 koa模塊
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');

//實例化
const app = new Koa();
const router = new Router();

//配置靜態資源中間件
app.use(static(__dirname + "/static"));

//配置模板引擎中間件
app.use(views('views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    // 設置 cookie
    ctx.cookies.set('userinfo',encodeURIComponent('張三'),{maxAge:10*1000})
    await ctx.render('index', {});
});

router.get('/news', async (ctx) => {
    // 獲取 cookie
    console.log(decodeURIComponent(ctx.cookies.get('userinfo')));
    await ctx.render('index', {});
});

//啟動路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

我們在 router.get("/" ) 中通過 ctx.cookie.set() 的形式設置了一個 "userifon" 的 cookie ,然后在 router.get("/news" ) 中通過 ctx.cookie.get() 的形式來獲取我們設置的 userinfo 的 cookie 值。

當我們運行 localhost：3000 后再運行 localhost：3000/news 時，我們在代碼編輯器控制台可以看到如下輸出結果：

從上圖可以看出我們已經獲取到了 userinfo = "張三" 的 cookie 值。

在 ctx.cookie.set() 中第三個參數為一個對象，里面有一些可選參數，如上面我們設置了一個 maxAge：10 * 1000；意思是該 cookie 值存儲時間為 10 * 1000 毫秒，即 10 秒鍾，在 10 秒之后會消失，還有其他可選參數，如下：

在上面的程序中，我們還用到了

encodeURIComponent 和 decodeURIComponent 

上面的兩個名詞分別表示對參數編碼和解碼，我們在傳輸數據的時候如果是漢字，如 "張三"，就需要對其編碼和解碼，這樣才能對內容做正確的傳輸。

 

接下來我們再看一下 koa 中 session 的使用。

session 是另一種記錄客戶狀態的機制，不同的是 Cookie 保存在客戶端瀏覽器中，而 session 保存在服務器上。當瀏覽器訪問服務器並發送第一次請求時，服務器端會創建一個 session 對象，生 成一個類似於 key,value 的鍵值對， 然后將 key(cookie)返回到瀏覽器(客戶)端，瀏覽 器下次再訪問時，攜帶 key(cookie)，找到對應的 session(value)。 客戶的信息都保存 在 session 中。

 

使用 koa 中的 session，我們需要安裝 koa-session 的模塊

npm install koa-session --save

我們將上面的 app.js 改為如下：

//引入 koa模塊
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');
const session = require('koa-session');

//實例化
const app = new Koa();
const router = new Router();

//配置靜態資源中間件
app.use(static(__dirname + "/static"));

//配置模板引擎中間件
app.use(views('views', {
    extension: 'ejs'
}));

//配置session的中間件
app.keys = ['some secret hurr'];   /**cookie的簽名 默認*/
const CONFIG = {
    key: 'koa:sess', /** 默認 */
    maxAge: 10000,  /**  cookie的過期時間 */
    overwrite: true, /** 默認 可以重寫過期時間 */
    httpOnly: true, /**  true表示只有服務器端可以獲取 cookie */
    signed: true, /** 默認 簽名 */
    rolling: true, /** 在每次請求時強行設置 cookie，這將重置 cookie 過期時間（默認：false） */
    renew: false, /** 當用戶進行瀏覽器操作時刷新 cookie 過期時間 */
};
app.use(session(CONFIG, app));

router.get('/', async (ctx) => {
    // 設置 cookie
    ctx.session.userinfo='張三';
    await ctx.render('index', {});
});

router.get('/news', async (ctx) => {
    // 獲取 cookie
    console.log(ctx.session.userinfo);
    await ctx.render('index', {});
});

//啟動路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

如上，我們需要在最開頭引入我們的 koa-session 模塊，然后設置 session 中間件。session 中也有類似於 cookie 的可選值，其中我們只需要修改 maxAge，rolling 和 renew 三個值即可。

　　maxAge：過期時間，以毫秒為單位。

　　rolling：當我們每次有瀏覽器請求時會重新刷新我們的 session 過期時間，是一個具體的時間值，如 12:00:00。

　　renew：當我們每次有瀏覽器請求時會重新刷新我們的 session 過期時間，是一個時間范圍，如 5000 毫秒。

接下來我們就可以在我們的瀏覽器中使用 session 了，我們在進入 localhost:3000 時設置一個 userinfo="張三"，當進入 localhost:3000/news 時在代碼編輯器后台打印輸出這個 userinfo，如下：

我們拿到了 userinfo："張三" 的值。

 

現在我們來看一下 cookie 和 session 的區別：

　　1、cookie 數據存放在客戶的瀏覽器上，session 數據放在服務器上。 

　　2、cookie 不是很安全，別人可以分析存放在本地的 cookie 並進行 cookie 欺騙，考慮到安全應當使用 session。 

　　3、session 會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能 考慮到減輕服務器性能方面，應當使用 cookie。 

　　4、單個 cookie 保存的數據不能超過 4K，很多瀏覽器都限制一個站點最多保存 20 個 cookie。