cookie 在工作中比較常用, 可以自行封裝一些 添加/刪除/獲取cookie的方法, 可參考這個(gè)

在Vue中有個(gè)很好用的插件 vue-cookies

github地址：https://github.com/cmp-cc/vue-cookies

我們具體來(lái)看下怎么使用這個(gè)插件的使用

第一步：安裝vue-cookie

npm install vue-cookie --save

(a). 默認(rèn)值設(shè)置

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

默認(rèn): expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = ''

expireTimes: 有效期 默認(rèn)1d

path: cookie 存放的路徑 默認(rèn) '/'

domain: cookie所在的域，默認(rèn)為請(qǐng)求地址

secure: cookie只能用https協(xié)議發(fā)送給服務(wù)器

sameSite: 用來(lái)限制第三方 Cookie，從而減少安全風(fēng)險(xiǎn), 可以設(shè)置三個(gè)值。

. Strict: 最為嚴(yán)格，完全禁止第三方 Cookie，跨站點(diǎn)時(shí)，任何情況下都不會(huì)發(fā)送 Cookie。換言之，只有當(dāng)前網(wǎng)頁(yè)的 URL 與請(qǐng)求目標(biāo)一致，才會(huì)帶上 Cookie。

這個(gè)規(guī)則過(guò)于嚴(yán)格，可能造成非常不好的用戶(hù)體驗(yàn)。比如，當(dāng)前網(wǎng)頁(yè)有一個(gè) GitHub 鏈接，用戶(hù)點(diǎn)擊跳轉(zhuǎn)就不會(huì)帶有 GitHub 的 Cookie，跳轉(zhuǎn)過(guò)去總是未登陸狀態(tài)。

. Lax: 規(guī)則稍放寬，大多數(shù)情況不發(fā)送第三方 Cookie，但導(dǎo)航到目標(biāo)網(wǎng)址的 Get 請(qǐng)求除外。

導(dǎo)航到目標(biāo)網(wǎng)址的 GET 請(qǐng)求，只包括三種情況：鏈接，預(yù)加載請(qǐng)求，GET 表單

設(shè)置了Strict或Lax以后，基本就杜絕了 CSRF 攻擊。當(dāng)然，前提是用戶(hù)瀏覽器支持 SameSite 屬性。

. None: 網(wǎng)站可以選擇顯式關(guān)閉SameSite屬性，將其設(shè)為None。不過(guò)，前提是必須同時(shí)設(shè)置Secure屬性(Cookie 只能通過(guò) HTTPS 協(xié)議發(fā)送)，否則無(wú)效。

(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 會(huì)自動(dòng)幫你把對(duì)象轉(zhuǎn)為:

json if (value && value.constructor === Object ){

value = JSON.stringify(value)

}

expireTimes : cookie有效時(shí)間，默認(rèn)時(shí)間為1d

可為到期時(shí)間點(diǎn)(expire=) [Date]，也可為有效時(shí)間段單位s(max-age=)[Number]，

傳入Infinity||-1被認(rèn)該cookie永久有效，

傳入0 會(huì)被判斷為false導(dǎo)致取默認(rèn)值，

傳入非-1 的負(fù)數(shù)會(huì)立即刪除該cookie，

傳入String類(lèi)型但又不會(huì)被正則匹配的('0'、'abc'、'Session')則關(guān)閉瀏覽器的時(shí)候銷(xiāo)毀cookie(Expire/Max-Age=Session)，效果類(lèi)似Session。

path : cookie所在目錄，默認(rèn) '/' 根目錄

設(shè)置 path: '/projectName' 指定項(xiàng)目名下 '/projectName' 使用

domain : cookie所在的域，默認(rèn)為請(qǐng)求地址

secure : Secure屬性是說(shuō)如果一個(gè)cookie被設(shè)置了Secure=true，那么這個(gè)cookie只能用https協(xié)議發(fā)送給服務(wù)器，用http協(xié)議不發(fā)送

第二步：在 mian.js 引入和通過(guò) 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');

檢測(cè)是否有key cookie

$cookies.isKey(key) // return true or false

列出所有cookie

$cookies.keys() // return ['key', 'key', ......]

總結(jié)

以上是生活随笔為你收集整理的vue怎么让接口带上cookie_在Vue中怎么使用cookie 之 vue-cookies的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。