在Vue3项目中js-cookie库的使用

news2024/11/27 12:42:12

文章目录

  • 前言
    • 1.安装js-cookie库
    • 2.引入、使用js-cookie库


前言

今天分享一下在Vue3项目中引入使用js-cookie。

1.安装js-cookie库

js-cookie官网
在这里插入图片描述

安装js-cookie,输入

npm i js-cookie

在这里插入图片描述
安装完成可以在package.json中看到:
在这里插入图片描述
安装以后,就可以对js-cookie进行操作了。
在需要的文件中进行引入,但是发现出现了报错,项目是Vue3+ts的,由于因为没有安装ts所对应的类型库,所以是用不了js-cookie的。
在这里插入图片描述
按照提示的报错再运行一下提示的命令:
在这里插入图片描述
再次重新运行项目即可。(如果重新运行项目报错提示也没有取消,可以关闭项目,再次用VSCode打开,就会好了)。

2.引入、使用js-cookie库

在这里插入图片描述
在请求登录接口获取到token值以后,再存储token到cookie中:
在这里插入图片描述
运行项目,输入用户名密码,然后f12到Application中可以看到cookie中已经存了token值了。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/471212.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++代码之美】你不得不知道的经典代码

1.斐波那契数列 斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家莱昂纳多斐波那契(Leonardo Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个…

vite4+vue3:从0到1搭建vben后台管理系统

从0到1带你学习如何搭建vben后台管理系统系列文章目录 一.准备工作:技术选型基础环境的搭建 文章目录 从0到1带你学习如何搭建vben后台管理系统系列文章目录一.准备工作:技术选型基础环境的搭建 前言一、技术选型二、生成基础项目三、安装步骤跑起项目 总结 前言 前端日趋复杂…

鸿蒙Hi3861学习二-程序烧录与日志输出

一、准备事项 开发板:BearPi-Hm Nano windows工具:HiBurn.exe https://pan.baidu.com/s/18OQD1_BvjNKD_J2e2iX3qg?pwdadrs 提取码:adrs windows工具:MobaXterm和RaiDrive 把ubuntu文件夹映射到windows本地。可以参考如下链接&am…

边缘计算在哪些场景的应用?实现了哪些功能

边缘计算是一种分布式计算模型,将数据处理和存储功能从云中心移动到接近数据源的边缘设备上,从而在处理延迟、网络带宽、隐私保护和数据安全等方面带来了许多优势。 智慧油站应用:在加油区部署的吸烟检测、打电话检测、烟火检测、区域入侵检测…

Mybatis-Flex快速入门教程

目录 一、Mybatis-Flex是什么? 二、Mybatis-Flex的有什么特点? 三、Mybatis-Flex和同类框架对比 四、Mybatis-Flex支持的数据库类型 五、快速入门 (1)引入依赖 (2)创建数据库 (3&#…

攀高识别预警系统 yolov7

攀高识别预警系统通过yolov7网络模型技术,攀高识别预警系统对人员违规抽烟、打架斗殴、异常倒地、翻越围墙、异常聚集、打电话、区域侵入等行为分析等立即抓拍及时触发告警。YOLOv7 的发展方向与当前主流的实时目标检测器不同,研究团队希望它能够同时支持…

【5. ROS机器人的运动控制】

【ROS机器人的运动控制】 1. 前言2. 机器人的运动3. 机器人的运动速度单位4. geometry_msgs模型5. 用C实现机器人运动控制5.1 新建vel_pkg包5.2 编写vel_node.cpp代码5.3 设置编译规则5.4 运行验证 6. 用python实现机器人运动控制6.1 新建vel_pkg包6.2 编写vel_node.py代码6.3 …

[开源工具]Win10/11/8/7 获取笔记本电脑连接过的WIFI名称和密码[开箱可用]

[开源工具]Win10/11/8/7 获取笔记本电脑连接过的WIFI名称和密码[开箱可用] 1.打开命令提示符(管理员身份)2.输入netsh wlan show profile3.输入netsh wlan export profile folderC:\ keyclear4.打开C盘5.使用记事本打开 查看WIFI名称和密码 1.打开命令提示符(管理员身份) 首先…

计算机网络-应用协议与数据包分析实验(使用Wireshark)

实验一.应用协议与数据包分析实验(使用Wireshark) 一.实验目的 通过本实验,熟练掌握Wireshark的操作和使用,学习对HTTP协议进行分析。 二.实验内容 学习http协议,使用Wireshark截获http报文,对http请求报文和响应报文进行分析。…

【ONE·C++ || 多态】

总言 主要介绍多态相关内容。 文章目录 总言1、多态介绍1.1、多态是什么1.2、构成多态的两个必备条件1.2.1、虚函数介绍1.2.2、基类的指针或者引用调用虚函数1.2.3、演示多态条件的破坏(两个特例说明)1.2.3.1、不符合条件演示1.2.3.2、特例演示 1.3、一…

【高危】Spring Boot在Cloud Foundry中部署存在路由限制绕过风险(CVE-2023-20873)

漏洞描述 Spring Boot是用于构建Java应用程序的框架,Cloud Foundry是用于部署和管理应用程序的云平台,/cloudfoundryapplication也会路由至Spring Boot actuator。 当 Spring Boot 的受影响版本部署在 Cloud Foundry 上且具有处理 /cloudfoundryapplic…

计算机网络-应用层和传输层协议分析实验(PacketTracer)

实验三.应用层和传输层协议分析实验 一.实验目的 通过本实验,熟悉PacketTracer的使用,学习在PacketTracer中仿真分析应用层和传输层协议,进一步加深对协议工作过程的理解。 二.实验内容 从 PC 使用 URL 捕获 Web 请求,运行模拟并…

第06讲:为何各大开源框架专宠 SPI 技术?

在此前的内容中,已经详细介绍了 SkyWalking Agent 用到的多种基础技术,例如,Byte Buddy、Java Agent 以及 OpenTracing 中的核心概念。本课时将深入介绍 SkyWalking Agent 以及 OAP 中都会使用到的 SPI 技术。 JDK SPI 机制 SPI&#xff08…

Oracle-12c版本之后替换OCR磁盘组步骤

背景: 用户有一套Oracle12.2的RAC集群,在安装配置的时候,OCR磁盘只使用了单块磁盘external的模式,想替换成包含三块磁盘组成员normal模式的磁盘组 OCR磁盘组存储的对象: 在替换OCR磁盘之前,我们先确认需要迁移的OCR磁盘组存储的对…

图扑数字孪生助力智慧冷链园区实现大数据实时监控

前言 近年来,业界学者及企业就智慧冷链物流展开深入研究,2010 年 IBM 发布的《智慧的未来供应链》研究报告中提出智慧供应链概念,并由此延伸出智慧物流概念,即智慧物流是以信息化为依托并广泛应用物联网、人工智能、大数据、云计…

设置rocky Linux ip 与主机服务器处于同一网段内,并且能上网

第一步:查找主机服务器的 了解地址信息 第二步,设置rocky Linux 网络适配器连接,选择桥接模式 第三步:设置rocky Linux ip 第四步,设置完,重启Linux ,验证ip是否修改过来,是否在同一…

【python】scikit-learn包:模型评估与优化

模型构建的目的 首先明确,模型拟合的目的: 不是对训练数据进行准确预测,而是对新数据进行准确预测 欠拟合 与 过拟合 欠拟合:可以通过训练数据及时发现,且可通过优化模型结果解决 过拟合:难以发觉&#x…

Golang基础----基于Goland编辑器快速体验Golang

【原文链接】Golang基础----基于Goland编辑器快速体验Golang (1)打开Goland,点击“New Project” (2)设置项目存放位置以及项目名,然后点击“Add SDK”,然后点击“Local” (3&a…

vue3 的router跳转 - 页面同tab跳转和打开新tab跳转

vue3 的router跳转 - 页面同tab跳转和打开新tab跳转 vue3的路由基本知识 当前页需要的方法 主要是获得Vue Router实例暴露的一些方法,使用这些方法,进行路由操作引入 import { useRouter } from vue-router;调用 const router useRouter();目标页需…

Android jetpack Compose之约束布局

概述 我们都知道ConstraintLayout在构建嵌套层级复杂的视图界面时可以有效降低视图树的高度,使视图树扁平化,约束布局在测量布局耗时上比传统的相对布局具有更好的性能,并且约束布局可以根据百分比自适应各种尺寸的终端设备。因为约束布局确…