聊一聊 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 看到如下图所示界面
