当前位置:

首页 > 编程开发 > vue-cookies使用方法与vue使用获取cookie实现过程

vue-cookies使用方法与vue使用获取cookie实现过程

1.安装vue-cookies npm install vue-cookies -S 2.在main.js引入 import VueCookies from "vue-cookies"; Vue.use(VueCookies); 如图: 3.在vue组件中使用 (如果存入的是对象,需要先转换为jso

1.安装vue-cookies

npm install vue-cookies -S

2.在main.js引入

import VueCookies from "vue-cookies";
Vue.use(VueCookies);

如图:

vue-cookies使用方法与vue使用获取cookie实现过程

3.在vue组件中使用

(如果存入的是对象,需要先转换为json字符串)

设置cookies

this.$cookies.set('fileInfoId', to.query.fileInfoId)

如果是在某个js,例如router.js下使用,如下引入使用即可

import cookies from "vue-cookies";
cookies.set('fileInfoId', to.query.fileInfoId)

vue-cookies使用方法与vue使用获取cookie实现过程

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打对号√情况下,禁止ja vascript操作cookie,导致获取不到,可以让后端设置false;

vue-cookies使用方法与vue使用获取cookie实现过程

后端使用node+koa,种客户端一个cookie,但是在客户端内通过document.cookie获取不了此cookie。

经查是由于koa通过ctx.cookies.set(name, value, [options])种的cookie是自动默认带httpOnly的,httpOnly是服务器可访问 cookie, 默认是 true。

禁止ja vascript操作cookie(为避免跨域脚本(xss)攻击,通过ja vascript的document.cookie无法访问带有HttpOnly标记的cookie。)

所以通过在后端设置ctx.cookies.set(name, value, {httpOnly:false})关掉httponly即可。

总结

以上步骤基本覆盖了vue-cookies在日常开发中的常见操作:安装、引入、设置、获取、删除、检查以及排查httponly问题。实际项目中,如果遇到cookie在前端拿不到的情况,十有八九是后端设了httponly,记得让后端同事把那个开关关掉就行。

本文内容来源于互联网,如有侵权请联系删除。
作者最新文章
编程开发
相关文章 更多
谷歌浏览器Mac版入口
谷歌浏览器Mac版入口

谷歌浏览器Mac版官方安装指南 谷歌浏览器Mac版官方安装入口是https://www.google.com/chrome/,需macOS 12+系统、500MB空间,下载.dmg后拖入应用程序安装,支持多设备同步、性能优化与隐私保护功能。 苹果电脑Chrome的安装入口究竟在哪里?这个问题最近可是

vivo浏览器最新官方网站链接
vivo浏览器最新官方网站链接

vivo浏览器官方入口与核心体验全解析 很多用户都在寻找vivo浏览器的最新官方入口。别急,关于其网页版如何直接访问,以及它能带来怎样的体验,咱们这就来详细聊聊。 它的最新官方网站链接是:https://browser.vivo.com.cn。记住这个地址,就能直达核心。 平台核心功能介绍 首先,来

夸克浏览器登录异常怎么办
夸克浏览器登录异常怎么办

网络不稳、缓存堆积或是账号安全机制触发,都可能是夸克登录异常的“元凶”。别急,顺着网络、缓存和权限这几条线排查下来,绝大多数情况都能快速搞定。 当夸克浏览器突然“拒签”,登录按钮怎么点都没反应时,别先怪手速。这事儿多半出在几个最常见的环节上。咱们按顺序来,从外到内捋一遍,问题往往就迎刃而解了。 检查

百度浏览器如何清除浏览器历史记录
百度浏览器如何清除浏览器历史记录

百度浏览器历史记录清理全指南 很多朋友在用百度浏览器时,都想把上网痕迹清理干净,但可能不太清楚具体从哪里下手。这通常是因为历史记录没有主动去清理。其实,方法很全面,涵盖了从电脑端、手机App到云端账户的各个层面。 如果您在使用百度浏览器时希望移除已保存的访问痕迹,但不确定具体操作路径,则可能是由于历

Safari浏览器如何清除缓存和历史记录
Safari浏览器如何清除缓存和历史记录

Safari浏览器的缓存清理指南:五种方法应对不同场景 不知道你有没有遇到过这样的情况:用Safari打开网页,要么加载慢得像蜗牛,要么排版错乱,甚至刚刚登录的账号莫名其妙就掉线了。很多时候,这些问题背后的“元凶”并不是网络,而是浏览器里积压已久的缓存文件和历史记录在“作祟”。今天咱们就来系统盘一盘

火车头采集器如何使用Cookie进行登录
火车头采集器如何使用Cookie进行登录

火车头采集器登录需正确配置cookie:一、浏览器提取有效cookie;二、任务中设自定义cookie请求头;三、内置浏览器自动捕获;四、发布模块复用cookie;五、fiddler截获复杂登录cookie。 在使用火车头采集器抓取需要登录才能访问的页面时,如果总是跳回到登录页,或者看到一片空白甚至

AO3最新镜像入口 | 2025稳定访问Archive of Our Own官网
AO3最新镜像入口 | 2025稳定访问Archive of Our Own官网

AO3最新镜像入口 | 2025稳定访问Archive of Our Own官网 AO3官方唯一网址为archiveofourown.org,建议直接输入访问并添加书签防走失,镜像站如ao3.cubeart.club可作备用,但应优先使用官网以确保安全。 如何稳定访问Archive of Our O

using namespace 使用中遇到的问题怎么解决
using namespace 使用中遇到的问题怎么解决

命名空间的基本概念与常见引入问题在C++等编程语言中,命名空间(namespace)是一种将代码标识符(如变量、函数、类名)封装在特定名称下的机制,其主要目的是避免命名冲突,尤其是在大型项目或使用多个第三方库时。使用“using namespace”指令可以将指定命名空间中的所有名称引入当前作用域,

c语言函数递归 实操经验总结:这些技巧很实用
c语言函数递归 实操经验总结:这些技巧很实用

理解递归的基本原理在C语言中,递归是一种函数调用自身的编程技术。要掌握它,首先需要理解其核心思想:将一个复杂的大问题,分解为一个或几个与原问题相似但规模更小的子问题,直到子问题足够简单,可以直接求解。这个过程通常包含两个关键部分:递归出口和递归体。递归出口定义了问题何时不再继续分解,即最简单、可直接

c语言函数递归 怎么选?常见方案对比分析
c语言函数递归 怎么选?常见方案对比分析

递归函数的基本概念与适用场景在C语言编程中,递归是一种函数调用自身的编程技巧。它并非适用于所有问题,但在处理某些具有自相似结构的问题时,能提供极其清晰和优雅的解决方案。递归的核心思想是将一个大规模问题分解为一个或多个同类型但规模更小的子问题,直到子问题简单到可以直接求解。典型的适用场景包括树形结构的

查看更多
精品专题 更多
装机必备
装机必备

正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

Windows
Windows

正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

macOS软件
macOS软件

正软商城macOS软件专区,精选适用于Mac电脑的办公、设计、影音、效率、开发和系统工具,提供软件功能介绍、macOS兼容版本、正版授权及购买下载服务。

Mac软件 更多
灵活计算器
灵活计算器
macOS/iOS/Android

灵活计算器是一款笔记式算数应用,支持实时计算、动态关联和云端同步功能。记录、整理和输出之间的过渡会更自然,适合长期写作、做笔记或持续沉淀个人内容。

赤友清理大师
赤友清理大师
macOS

赤友清理大师是一款为 Mac 设计的智能清理优化工具,可精准扫描垃圾、大文件、重复文件等,释放磁盘空间。做扫描整理、文字提取和表格转换时,它能把识别后的处理步骤接得更顺,资料录入这类场景会省下不少时间。

极度公式
极度公式
Windows/macOS/Linux

极度公式是一款跨平台专业LaTeX公式识别编辑软件,支持OCR公式识别和多平台编辑。和使用说明,避免使用,享受完整功能与稳定支持。做扫描整理、文字提取和表格转换时,它能把识别后的处理步骤接得更顺,资料录入这类场景会省下不少时间。

WINDOWS 更多
Windows 10
Windows 10
Windows

Windows 10 是一款微软推出的经典操作系统,拥有硬件兼容性与多任务处理能力。它更偏向把系统状态查看和常用调节动作放在一起,适合需要持续观察和微调设备状态的场景。

极度公式
极度公式
Windows/macOS/Linux

极度公式是一款跨平台专业LaTeX公式识别编辑软件,支持OCR公式识别和多平台编辑。和使用说明,避免使用,享受完整功能与稳定支持。做扫描整理、文字提取和表格转换时,它能把识别后的处理步骤接得更顺,资料录入这类场景会省下不少时间。

密码键盘
密码键盘
Windows/macOS/iOS/Android

密码键盘是一款兼具安全性与便捷性的高效密码管理器。日常使用里的持续防护和信息管理会更突出,适合把安全控制放进长期使用流程中的场景。