聊一聊 cookie
http 之session和cookie
web安全之token
js-cookie
參考react實現登錄與身份認證
深入了解Cookie
SPA的鑒權方式和傳統的web應用不同：由於頁面的渲染不再依賴服務端，與服務端的交互都通過接口來完成，而REASTful風格的接口提倡無狀態（state less），通常不使用cookie和session來進行身份認證。
比較流行的一種方式是使用web token，所謂的token可以看作是一個標識身份的令牌。客戶端在登錄成功后可以獲得服務端加密后的token，然后在后續需要身份認證的接口請求中在header中帶上這個token，服務端就可以通過判斷token的有效性來驗證該請求是否合法。
1. 基於Token的用戶驗證
- 客戶端使用用戶名跟密碼請求登錄
- 服務端收到請求，去驗證用戶名與密碼
- 驗證成功后，服務端會簽發一個 Token，再把這個 Token 發送給客戶端
- 客戶端收到 Token 以后可以把它存儲起來，比如放在 Cookie 里或者 Local Storage 里
- 客戶端每次向服務端請求資源的時候需要帶着服務端簽發的 Token
- 服務端收到請求，然后去驗證客戶端請求里面帶着的 Token，如果驗證成功，就向客戶端返回請求的數據
2. Cookie如何滿足同源策略
- 注意： 除了針對具體指定的多個域名發送Cookie 之外，不指定domain 屬性顯得更安全。
設置document.domain = ‘baidu.com’
3. 封裝cookie的增刪改查
function setCookie(key, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
// Cookie 的expires 屬性指定瀏覽器可發送Cookie 的有效期。當省略expires 屬性時，Cookie僅在瀏覽器關閉之前有效。
document.cookie = key + '=' + value + ';expires=' + oDate;
}
function removeCookie(key) {
setCookie(key, '', -1);//這里只需要把Cookie保質期退回一天便可以刪除
}
function getCookie(key) {
var cookieArr = document.cookie.split('; ');
for(var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split('=');
if(arr[0] === key) {
return arr[1];
}
}
return false;
}
4. 關於cookie的web安全方面
- Cookie 的HttpOnly 屬性是Cookie 的擴展功能，它使JavaScript 腳本無法獲得Cookie。其主要目的為防止跨站腳本攻擊（Cross-sitescripting，XSS）對Cookie 的信息竊取。發送指定HttpOnly 屬性的Cookie 的方法
Set-Cookie: name=value; HttpOnly - Cookie 的secure 屬性用於限制Web 頁面僅在HTTPS 安全連接時，才可以發送Cookie。
什么是session
在計算機中，尤其是在網絡應用中，稱為“會話控制”。Session 對象存儲特定用戶會話所需的屬性及配置信息。這樣，當用戶在應用程序的 Web 頁之間跳轉時，存儲在 Session 對象中的變量將不會丟失，而是在整個用戶會話中一直存在下去。當用戶請求來自應用程序的 Web 頁時，如果該用戶還沒有會話，則 Web 服務器將自動創建一個 Session 對象。當會話過期或被放棄后，服務器將終止該會話。Session 對象最常見的一個用法就是存儲用戶的首選項。例如，如果用戶指明不喜歡查看圖形，就可以將該信息存儲在 Session 對象中。
打開chrome瀏覽器 => F12 => Application 看到如下圖所示界面
