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', ......]