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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。