vue-cookies使用方法與vue使用獲取cookie實現(xiàn)過程
更新時間：2026年04月25日 11:18:46 作者：i_am_a_div_日積月累_
本文主要介紹了 Vue 中使用 vue-cookies 庫的操作方法,包括安裝、引入、設(shè)置、獲取、刪除 cookies 等,并針對瀏覽器存在 cookie 前端卻獲取不到的問題進行了分析,提出了解決方案
1.安裝vue-cookies
npm install vue-cookies -S
2.在main.js引入
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
如圖：
3.在vue組件中使用
(如果存入的是對象，需要先轉(zhuǎn)換為json字符串)
設(shè)置cookies
this.$cookies.set('fileInfoId', to.query.fileInfoId)
如果是在某個js，例如router.js下使用，如下引入使用即可
import cookies from "vue-cookies";
cookies.set('fileInfoId', to.query.fileInfoId)
4.獲取cookies
this.$cookies.get('fileInfoId')
5.刪除cookies
this.$cookies.remove('fileInfoId');
6.查看cookies
this.$cookies.isKey('fileInfoId') // return false or true
7.獲取所有cookies
this.$cookies.keys() // return a array
8.針對瀏覽器存在cookie，前端卻獲取不到的問題
httpOnly默認為true打?qū)μ?radic;情況下，禁止javascript操作cookie，導(dǎo)致獲取不到，可以讓后端設(shè)置false；
后端使用node+koa，種客戶端一個cookie，但是在客戶端內(nèi)通過document.cookie獲取不了此cookie。
經(jīng)查是由于koa通過ctx.cookies.set(name, value, [options])種的cookie是自動默認帶httpOnly的，httpOnly是服務(wù)器可訪問 cookie, 默認是 true。
禁止javascript操作cookie（為避免跨域腳本(xss)攻擊，通過javascript的document.cookie無法訪問帶有HttpOnly標記的cookie。）
所以通過在后端設(shè)置ctx.cookies.set(name, value, {httpOnly:false})關(guān)掉httponly即可。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
KeepAlive 是 vue 中的內(nèi)置組件，當多個組件動態(tài)切換時可以對實例狀態(tài)進行緩存，本文就來詳細的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下2023-10-10
今天小編就為大家分享一篇vue解決一個方法同時發(fā)送多個請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式
這篇文章主要介紹了Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
本文通過實例代碼給大家介紹了Vue axios配置,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue如何把字符串中的所有@內(nèi)容,替換成帶標簽的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點,有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要為大家介紹了拿來即用的vue旋轉(zhuǎn)木馬組件demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題
接到這樣一個項目需求是這樣的，前端vue?必須對象傳遞后端也必須對象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下2022-01-01