cookie 在工作中比较常用, 可以自行封装一些 添加/删除/获取cookie的方法, 可参考这个
在Vue中有个很好用的插件 vue-cookies
github地址：https://github.com/cmp-cc/vue-cookies
我们具体来看下怎么使用这个插件的使用
第一步：安装vue-cookie
npm install vue-cookie --save
(a). 默认值设置
$cookies.config(expireTimes[,path[, domain[, secure[, sameSite]]])
默认: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = ''
-
expireTimes: 有效期 默认1d -
path: cookie 存放的路径 默认 '/' -
domain: cookie所在的域，默认为请求地址 -
secure: cookie只能用https协议发送给服务器 -
sameSite: 用来限制第三方 Cookie，从而减少安全风险, 可以设置三个值。
.Strict: 最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态。
.Lax: 规则稍放宽，大多数情况不发送第三方 Cookie，但导航到目标网址的 Get 请求除外。
导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单
设置了Strict或Lax以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 SameSite 属性。
.None: 网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。
(b). $cookies.set方法
$cookies.set(key, value[, expireTimes[, path[, domain[, secure]]]])
-
key: cookie名
注意 $cookies key 不能是 ['expires', 'max-age', 'path', 'domain', 'secure']
-
value: cookie值, vue-cookie 会自动帮你把对象转为:
json if (value && value.constructor === Object ){
value = JSON.stringify(value)
}
-
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。 -
path: cookie所在目录，默认 '/' 根目录
设置 path: '/projectName' 指定项目名下 '/projectName' 使用 -
domain: cookie所在的域，默认为请求地址 -
secure: Secure属性是说如果一个cookie被设置了Secure=true，那么这个cookie只能用https协议发送给服务器，用http协议不发送
第二步：在 mian.js 引入和通过 Vue.use() 明确地安装
在 main.js 中引入
// es6 方法
import Vue from 'Vue'
import VueCookie from 'vue-cookie'
Vue.use(VueCookie) // 挂在在全局
第三步：在组件中使用
添加 cookie
this.$cookie.set('test', 'Hello world!', 1);
获取cookie
this.$cookie.set('test', 'Hello world!', 1); // return value
删除cookie
this.$cookie.delete('test');
检测是否有key cookie
$cookies.isKey(key) // return true or false
列出所有cookie
$cookies.keys() // return ['key', 'key', ......]
网友评论