近期，负责的一个后台sass系统出了个小bug，我们登陆token存储在localStorage里面，可以直接在浏览器Application里添加一个假token进入系统，查看后台的管理模块，虽然无法跟数据进行交互，但是sass平台的功能机制被一览无余。

我个人觉得其实无伤大雅，作为一个熟练的web搬运工（误 ，扒一个网站下来很容易，但是从产品的安全性和技术人员的自尊心考虑，还是准备做点防范。

现在流行的H5浏览器缓存技术有三种，localStorage，sessionStorage，cookie，w3c给这三者的定义我们来看一下：

• localStorage - 没有时间限制的数据存储，localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。（少部分会有浏览器兼容问题）
• sessionStorage - 仅在当前会话下有效，即会话级存储，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。（少部分会有浏览器兼容问题）
• cookie - 生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

先说一下为什么用localStorage来存储token，因为我们的需求要求登陆后一段时间内（一天）可以不用重新登陆就进入系统。用sessionStorage来存储token的话，浏览器退出，token就被清空了。用localStorage符合要求，但是不好控制失效时间。于是我们改变localStorage为cookie来存储用户登陆token。

cookie怎么来控制生命周期呢？看一下cookie都有哪些属性：

name: 存储到cookie中的键（key）

value：name对应的值（value）

Domain：域，一般指允许访问的域名，修改Domain可以用来跨域。

Path：访问路径。

Expires：cookie的过期日期，现在已经被max-age代替。

max-age：最大生存时间，这个是本文章的关键。

Cache-Control：与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

size：存储cookie的字节。

HTTP：http协议。

secure：获取或设置cookie的安全级别。

samesite：用于定义cookie如何跨域发送，这是谷歌开发的一种安全机制，目的是尝试阻止CSRF（Cross-site request forgery 跨站请求伪造）以及XSSI（Cross Site Script Inclusion (XSSI) 跨站脚本包含）攻击。

上述是cookie的全部属性，我们主要修改max-age来达到存储1天的效果。

借助vue-cookie管理工具（类似的还有vue-cookies），在npm上输入

npm install vue-cookie --save 在项目中这样引入即可。

查看vue-cookie文档，实际用法如下：

，这样我们可以设置cookie生命周期为1天。接下来我们解决防止假token登陆的问题。由于假token无法与后端产生数据交互，直接在axios的拦截响应的方法下面判断状态码为401，就自动跳转到登陆页。代码如下：

效果如下：，修改token值为errorToken，刷新页面后直接自动触发401，然后重定向到login登陆页，完成功能。

参考链接：