vue-cookie原理与使用

觉得可靠的vue-cookie：Vue使用cookie和session - 焕不涣 - 博客园 

cookie与session的区别：Cookie和Session的区别 - 简书

cookie与session基础联系：https://www.jb51.net/article/128745.htm

cookie与session前置知识点：

1、无状态的HTTP协议：

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器

传送到客户端的浏览器。

HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。（可以当作每次前端请求后端一次接口就是一次http请求）

2、会话（Session）跟踪：

会话，指用户登录网站后的一系列动作，比如浏览商品添加到购物车并购买。会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术

是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

cookie工作原理：

由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的

会话还是用户B的会话了。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie

的工作原理。

Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。

当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

session工作原理

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录，在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

每个用户访问服务器都会建立一个session，那服务器是怎么标识用户的唯一身份呢？事实上，用户与服务器建立连接的同时，服务器会自动为其分配一个SessionId。

什么东西可以让你每次请求都把SessionId自动带到服务器呢？显然就是cookie了，如果你想为用户建立一次会话，可以在用户授权成功时给他一个唯一的cookie。当一个

用户提交了表单时，浏览器会将用户的SessionId自动附加在HTTP头信息中，（这是浏览器的自动功能，用户不会察觉到），当服务器处理完这个表单后，将结果返回给SessionId

所对应的用户。试想，如果没有 SessionId，当有两个用户同时进行注册时，服务器怎样才能知道到底是哪个用户提交了哪个表单呢。

使用cookie

//1.导入依赖

npm install --save vue-cookie

//2.配置main.js

import cookie from 'vue-cookie'

Vue.prototype.$cookie = cookie//创建本地cookie

//3.组件当中使用：

create(){ this.$cookie.set('token', "asdasd") }

mouted(){ this.$cookie.get('token') }

destory(){ this.$cookie.delete('token') }

//4.设置到期时间：

this.$cookies.config('固定时间') //填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒

//指定时间

this.$cookies.config(new Date(2020, 12, 1))

this.$cookies.config("Sat, 13 Mar 2017 12:25:57 GMT")

//不写过期时间，默认为1天过期

this.$cookies.set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")

cookie参数补充

默认：$cookies.config(expireTimes[,path[, domain[, secure[, sameSite]]])

默认: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = ''

1. key : cookie名

2. value : cookie值, vue-cookie 会自动帮你把对象转为:

   json if (value && value.constructor === Object ){
       value = JSON.stringify(value)
   }

3. expireTimes : cookie有效时间，默认时间为1d 可为到期时间点(expire=) [Date]，也可为有效时间段单位s(max-age=)[Number]， 传入Infinity||-1被认该cookie永久有效， 传入0 会被判断为false导致取默认值， 传入非-1 的负数会立即删除该cookie， 传入String类型但又不会被正则匹配的('0'、'abc'、'Session')则关闭浏览器的时候销毁cookie(Expire/Max-Age=Session)，效果类似Session。

4. path : cookie所在目录，默认 '/' 根目录 

5. domain : cookie所在的域，默认为请求地址

6. secure : Secure属性是说如果一个cookie被设置了Secure=true，那么这个cookie只能用https协议发送给服务器，用http协议不发送

 cookie与session结合使用

服务器生成的sessionid给前端，前端浏览器用cookie把sessionid存储下来 ,接下来每次请求都携带这个cookie就可以进行检验了

视频推荐：Cookie、Session、Token究竟区别在哪？如何进行身份认证，保持用户登录状态？_哔哩哔哩_bilibili