Cookie

HTTP請求是無狀態(tài)的，但是在開發(fā)時，有些情況是需要知道請求的人是誰的。為了解決這個問題，HTTP協(xié)議設(shè)計了一個特殊的請求頭：Cookie。服務(wù)端可以通過響應(yīng)頭（set-cookie）將少量數(shù)據(jù)響應(yīng)給客戶端，瀏覽器會遵循協(xié)議將數(shù)據(jù)保留，并在下一次請求同一個服務(wù)的時候帶上。

// html中插入DOM和JS方法
<div><button onclick="add()">增加Cookie</button><button onclick="del()">刪除Cookie</button><button onclick="editor()">修改Cookie</button><button onclick="show()">查看Cookie</button>
</div>
<script>function add(){fetch("/add",{method:"post",headers:{"Content-type":"application/json"}});}function del(){fetch("/del",{method:"post",headers:{"Content-type":"application/json"}});}function editor(){fetch("/editor",{method:"post",headers:{"Content-type":"application/json"}});}function show(){fetch("/show",{method:"post",headers:{"Content-type":"application/json"}});}
</script>

async add() {const ctx = this.ctxctx.cookies.set("user", "jspang.com")ctx.body = {status:200,data:'Cookie添加成功'}
}
async del() {const ctx = this.ctxctx.cookies.set("user", null)ctx.body = {status:200,data:'Cookie刪除成功'}
}
async editor() {const ctx = this.ctxctx.cookies.set("user",'bilibili')ctx.body = {status:200,data:'Cookie修改成功'}
}
async show() {const ctx = this.ctxconst user=ctx.cookies.get("user")console.log(user)ctx.body = {status:200,data:'Cookie顯示成功'}
}// 配置路由
router.post('/add', controller.zhuba.add);
router.post('/del', controller.zhuba.del);
router.post('/editor', controller.zhuba.editor);
router.post('/show', controller.zhuba.show);

配置和加密

一些配置選項(xiàng)，比如有效時間、服務(wù)端操作設(shè)置和中文編寫加密這些操作。
ctx.cookies.set( ) 方法是有三個參數(shù)的，第一個參數(shù)是key，第二個參數(shù)是value，第三個參數(shù)就可以進(jìn)行配置。比如你需要配置Cookie的有效時間，可以使用maxAge屬性。(這個時間是毫秒。)

maxAge 時效設(shè)置

maxAge: 1000 * 2 (毫秒)

async add(){const ctx = this.ctxctx.cookies.set("user","jspang.com",{maxAge:1000*2})ctx.body = {status:200,data:'Cookie添加成功'}
}

HhttpOnly 是否只允許服務(wù)端來操作Cookie

偽造Cookie來繞過登錄是黑客經(jīng)常使用的一種手段，所以為了安全，Egg.js默認(rèn)設(shè)置只允許服務(wù)端來操作Cookie。
比如通過JS的方式document.cookie獲取Cookie是不能獲取的(需要在瀏覽器的控制臺輸入獲取)。當(dāng)我們想通過客戶端操作Cookie時，可以通過下面的代碼進(jìn)行設(shè)置。

async add(){const ctx = this.ctxctx.cookies.set("user","jspang.com",{maxAge:1000*60,httpOnly:false})ctx.body = {status:200,data:'Cookie添加成功'}
}

encrypt 設(shè)置中文Cookie （set加密 show解密）

加密只要在第三個參數(shù)中，加入encrypt:true，就可以加密成功。

ctx.cookies.set("user","zhuba",{encrypt:true
})

直接通過ctx.cookies.get( )方法獲取，獲取的是undefind，也就是無法獲取的。這時候需要再次配置解密才可以使用, 在show( )方法里配置代碼如下。

const user=ctx.cookies.get("user",{encrypt:true
})

Session

Cookie和Session非常類似，Egg中的Session就存儲再Cookie中，但是Session比Cookie的安全性更高。所以在開發(fā)中經(jīng)常使用Cookie來保存是否登錄，而用Session來保存登錄信息和用戶信息。

添加、獲取、刪除

• 添加：在add（）方法中 ctx.session.username = ‘zhuba’
• 獲取：直接獲取 const username = ctx.session.username
• 刪除：把值賦為空即可 ctx.session.username = null

session是支持中文的，不需要加密解密

配置項(xiàng)

config.session = {key :"PANG_SESS",   // 設(shè)置Key的默認(rèn)值httpOnly:true,      // 設(shè)置服務(wù)端操作maxAge:1000*60  ,   // 設(shè)置最大有效時間renew: true,        // 頁面有訪問動作自動刷新session 
}

中間件的編寫

Egg是對Koa的二次封裝，所以中間件這部分和Koa框架是一樣的，也追尋洋蔥圈模型。

Egg.js約定中間件要寫在/app/middleware文件夾下

module.exports = options => {return async (ctx, next) => {if (ctx.session.counter) { // 沒學(xué)數(shù)據(jù)庫先使用sessionctx.session.counter++;} else {ctx.session.counter = 1;}await next();}
};

手動掛載：config/config.default.js config.middleware = [‘counter’];

在index（）中使用, 可以發(fā)現(xiàn)中間件現(xiàn)在的作用域是全局的。

要想只在某一頁面使用需要在router（路由）中配置中間件的使用，并去除全局掛載。

const counter = app.middleware.counter()const {router,controller,} = app;router.get('/', counter, controller.home.index);

在實(shí)際開發(fā)中中間件還是有很多用處的，比如日志的記錄、比如所有頁面的Gzip壓縮展示、比如全局埋點(diǎn)的使用