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

時間 2019-11-13

標籤 koa2 koa 入門進階之路简体版

原文原文鏈接

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

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

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

咱們將以前項目中的 app.js 改成以下代碼：服務器

 1 //引入 koa模塊
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5 const static = require('koa-static');
 6 
 7 //實例化
 8 const app = new Koa();
 9 const router = new Router();
10 
11 //配置靜態資源中間件
12 app.use(static(__dirname + "/static"));
13 
14 //配置模板引擎中間件
15 app.use(views('views', {
16     extension: 'ejs'
17 }));
18 
19 router.get('/', async (ctx) => {
20     // 設置 cookie
21     ctx.cookies.set('userinfo',encodeURIComponent('張三'),{maxAge:10*1000})
22     await ctx.render('index', {});
23 });
24 
25 router.get('/news', async (ctx) => {
26     // 獲取 cookie
27     console.log(decodeURIComponent(ctx.cookies.get('userinfo')));
28     await ctx.render('index', {});
29 });
30 
31 //啓動路由
32 app.use(router.routes());
33 app.use(router.allowedMethods());
34 
35 app.listen(3000);

咱們在 router.get("/" ) 中經過 ctx.cookie.set() 的形式設置了一個 "userifon" 的 cookie ,而後在 router.get("/news" ) 中經過 ctx.cookie.get() 的形式來獲取咱們設置的 userinfo 的 cookie 值。cookie

當咱們運行 localhost：3000 後再運行 localhost：3000/news 時，咱們在代碼編輯器控制檯能夠看到以下輸出結果：session

從上圖能夠看出咱們已經獲取到了 userinfo = "張三" 的 cookie 值。併發

在 ctx.cookie.set() 中第三個參數爲一個對象，裏面有一些可選參數，如上面咱們設置了一個 maxAge：10 * 1000；意思是該 cookie 值存儲時間爲 10 * 1000 毫秒，即 10 秒鐘，在 10 秒以後會消失，還有其餘可選參數，以下：app

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

encodeURIComponent 和 decodeURIComponent

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

接下來咱們再看一下 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 改成以下：

 1 //引入 koa模塊
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5 const static = require('koa-static');
 6 const session = require('koa-session');
 7 
 8 //實例化
 9 const app = new Koa();
10 const router = new Router();
11 
12 //配置靜態資源中間件
13 app.use(static(__dirname + "/static"));
14 
15 //配置模板引擎中間件
16 app.use(views('views', {
17     extension: 'ejs'
18 }));
19 
20 //配置session的中間件
21 app.keys = ['some secret hurr'];   /**cookie的簽名 默認*/
22 const CONFIG = {
23     key: 'koa:sess', /** 默認 */
24     maxAge: 10000,  /**  cookie的過時時間 */
25     overwrite: true, /** 默認 能夠重寫過時時間 */
26     httpOnly: true, /**  true表示只有服務器端能夠獲取 cookie */
27     signed: true, /** 默認 簽名 */
28     rolling: true, /** 在每次請求時強行設置 cookie，這將重置 cookie 過時時間（默認：false） */
29     renew: false, /** 當用戶進行瀏覽器操做時刷新 cookie 過時時間 */
30 };
31 app.use(session(CONFIG, app));
32 
33 router.get('/', async (ctx) => {
34     // 設置 cookie
35     ctx.session.userinfo='張三';
36     await ctx.render('index', {});
37 });
38 
39 router.get('/news', async (ctx) => {
40     // 獲取 cookie
41     console.log(ctx.session.userinfo);
42     await ctx.render('index', {});
43 });
44 
45 //啓動路由
46 app.use(router.routes());
47 app.use(router.allowedMethods());
48 
49 app.listen(3000);