Vue前端设置Cookie和鉴权问题

前景：本周五的时候后端让我从前端工程中排查，有没有设置cookie。在我连续说了没有的情况下，连续四次被质疑。最后以我发四说没有，不欢而散。基于对前端的不信任，写个小作文来说明vue前端怎么设置cookie

Cookie的概念性质的东西这里不赘述。

一：Cookie生成机制

服务端生成，在 Http响应头 Respond-Header 中 Set-Cookie
客户端生成

二：服务端生成

服务端可通过 Cookie类的构造函数和实例方法设置Cookie（key=value）并返回，
浏览器收到响应并发现响应头中有 Set-Cookie，浏览器就会把key、value保存在浏览器中。
在向同一个域名发起的后续请求中，浏览器会在请求头中加上该cookie字段（除非它过期了）。

服务器端通过设置Set-Cookie 的 Expires 和 Max-Age两个属性来设置cookie的有效期

1、Expires

Set-Cookie: sessionId=abc123; Expires=Thu, 01 Jan 1970 00:00:00 UTC;

Expires 的值必须是一个完整的日期和时间，包括年、月、日、时、分、秒和时区。

Expires 值为 过去时，浏览器立马删除该Cookie；
Expires 值为 将来时，浏览器会在将来的那个时点删除该Cookie

2、Max-Age

Set-Cookie: sessionId=abc123; Max-Age=0;

Max-Age的值是个秒值。

Max-Age = 0；浏览器立即删除该Cookie
Max-Age = -1; 浏览器重启后Cookie消失。关闭当前页签或者关闭浏览器，Cookie都会消失。
Max-Age=3600; 表示3600 秒（即 1H）内有效，超期失效。

同时设置这俩属性时，Max-Age 的优先级高于Expires

三：客户端生成方式

JavaScript 自带的 document.cookie
第三方依赖库：如js-cookie

1、document.cookie

// 设置cookie
document.cookie = 'sessionId=abc123; path=/'// 获取Cookie值
const getCookie = name => {var cookies = document.cookie.split(";");for (let i = 0; i < cookies.length; i++) {const [key, value] = cookies[i].split("=")if (key.trim() === name) {return value;}}return ""
};// 删除cookie 
// 方式：将cookie的 过期时间（expires）属性指定为一个过去的时间
const deleteCookie = name => { document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';  
}
deleteCookie('password');

2、js-cookie

import Cookies from 'js-cookie';  // 设置cookie  
Cookies.set('sessionId', 'abc123');  // 获取cookie  
const sessionId = Cookies.get('sessionId');  // 删除cookie  
Cookies.remove('sessionId');

四：--------- 我是分割线 ---------

前端是否设置cookie，工程中全局搜索cookie关键字，就能判断前端是否做了特殊处理。

cookie通过浏览器自动管理，大多数情况下前端并不需要处理cookie。

浏览器本地数据存储：建议使用web storage（包括localStorage和sessionStorage）。更大的存储空间（5M左右），提供了多个属性和方法，数据操作更简单。

五：鉴权

1）cookie的缺点

不安全：cookie的键值对都是明文，用户可通过浏览器或其他工具拿到cookie，可能被篡改（document.cookie），存在安全隐患。因cookie存在安全问题，有些企业的内网或安全策略会要求禁用cookie。
容量限制：每个cookie的大小不超过4KB，单个域名设置的Cookie数量有限制。
不能存实例
一些设备或浏览器可能不支持cookie
跨域问题
...

因上面的缺点，cookie不适合做鉴权，需要用session配合。