vue3中cookie的详细使用过程

目录
  • 前言
  • 1.vue中cookie的安装
  • 2.登录过程中cookies的设置
  • 3.在需要的地方拿到之前存入的cookies
  • 总结

前言

cookie使用最多的地方想必是保存用户的账号与密码，可以避免用户每次登录时都要重新输入

1.vue中cookie的安装

在终端中输入命令npm install vue-cookies --save，即可安装cookies，安装之后在main.js文件中写下以下代码

import { createApp } from 'vue'
import VueCookies from 'vue-cookies'

const app = createApp(App)

app.config.globalProperties.$cookies = VueCookies

即可在项目中使用cookies

2.登录过程中cookies的设置

因为用户可能会修改密码，所以我在业务中常用的做法是当登录的接口返回正确的数据后（判断正确，可以登录）先判断有没有cookies，有就将其删除，再创建新的cookies，代码如下

if (ret.code === 200) {
  // 删除之前的cookies
  if($cookies.isKey("xxxxx") ){
     $cookies.remove("xxxxx")
  }
}

之后将登录的信息重新存入cookie中，代码如下

// 设置cookies保存的内容
const xxxxx = {
  username: '',
  password: '',
  // 以下还有很多信息
}

最后便是重新存cookies，代码如下

// 设置cookies的日期为一个月
$cookies.config("1m")
// 设置cookies
$cookies.set("xxxxx",xxxxx); // 前面的为设置cookies的名字，后面为内容

这里突然想到了面试中经常提到的一个问题，怎么将cookies设置为无效，答案是将cookies的过期时间设置为之前的时间，不知道大家有没有想到呢。

3.在需要的地方拿到之前存入的cookies

代码也非常简单啦

import { getCurrentInstance } from 'vue'

// 创建可以访问内部组件实例的实例
const internalInstance = getCurrentInstance()
const internalData = internalInstance.appContext.config.globalProperties
const xxxxx = internalData.$cookies.get('xxxxx') // 后面的为之前设置的cookies的名字

这样就可以在需要的地方拿到cookies中的内容了。

总结

到此这篇关于vue3中cookie使用的文章就介绍到这了,更多相关vue3 cookie使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中设置、获取、删除cookie的方法

    1.在src目录下的access下新建一个cookie.js, 内容如下: export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.lo

  • VUE前端cookie简单操作

    如下是简单cookie操作,当前仅限前端实例,具体内容如下 要注意的有两点: 1.cookie内容存贮的名称 2.删除cookie是通过设置过期为过去时间实现的 <body> <div id="app"> <button @click="clearCookie()"> 清除cookie </button> </div> </body> <script> let app = new V

  • 在Vue中如何使用Cookie操作实例

    在Vue中如何使用Cookie操作实例

    大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了.今天我想跟大家谈谈Cookie的使用.同样,这个Cookie的使用方法是我从公司的项目中抽出来的,为了能让大家看懂,我会尽量写详细点.废话少说,我们直接进入正题. 一.安装Cookie 在Vue2.0下,这个貌似已经不需要安装了.因为当你创建一个项目的时候,npm install 已经为我们安装好了.我的安装方式如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpa

  • 基于Vue 服务端Cookies删除的问题

    一般在我们做项目时,我们都会通过POST请求拿到服务器给到的set-Cookies,保存在浏览器的Cookie里 这里需要明确一点.缓存有三类 cookie. sessionStorage .localStorage cookie: 存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密.一般应用最典型的案列就是判断注册用户是否已经登过该网站. 另外两种是HTML5提供的: 不参与和服务器的通信: localS

  • vue3中cookie的详细使用过程

    目录 前言 1.vue中cookie的安装 2.登录过程中cookies的设置 3.在需要的地方拿到之前存入的cookies 总结 前言 cookie使用最多的地方想必是保存用户的账号与密码,可以避免用户每次登录时都要重新输入 1.vue中cookie的安装 在终端中输入命令npm install vue-cookies --save,即可安装cookies,安装之后在main.js文件中写下以下代码 import { createApp } from 'vue' import VueCooki

  • Vue3中Vuex的详细使用方法

    Vue3中Vuex的详细使用方法

    目录 Vuex是做什么的? 状态管理是什么? 单页面的状态管理 vuex(Vue3.2版本) 多页状态管理 vuex store对象属性介绍 Vue3中获取 store 实例对象的方法 1. state 2. mutations 3. actions 4. getters 5. modules 总结 Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购

  • vue2 vue3中使用Echarts详细

    vue2 vue3中使用Echarts详细

    目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar

  • vue3 中使用 jsx 开发的详细过程

    目录 安装 JSX 插件 使用语法差异 模板 指令 事件修饰符 v-for v-on 插槽 安装 JSX 插件 在 Vue2 中要想使用 jsx 开发,需要安装 @vue/babel-preset-jsx 等插件,之后在 babel 里指定即可,详细可以参考下面的 Vue2 GitHub 文档 Vue2:GitHub 文档 —— Babel Preset JSX 最近在使用 Vue3,突然想用 jsx 进行开发部分页面,顺便记录一下,也可以参考下面的 Vue3 GitHub 文档 Vue3:Gi

  • 如何在Vue3中实现自定义指令(超详细!)

    如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • ChatGPT在IDEA中使用的详细过程

    目录 安装 1.Settings 2. Plugins>MarketPlace 3.搜索chatgpt并安装(本人已安装) 配置 URL 设置 默认 官方源 自定义 Cloudflare 网络连接设置 读取超时 链接超时 使用 安装 下载最新版 并且手动安装: Settings/Preferences > Plugins > Marketplace > Install plugin from disk... 1.Settings 2. Plugins>MarketPlace

  • Python中创建表格详细过程

    Python中创建表格详细过程

    目录 1. 引言 2. 准备工作 3. 举个栗子 3.1 使用list生成表格 3.2 使用dict生成表格 3.3 增加索引列 3.4 缺失值处理 1. 引言 如果能够将我们的无序数据快速组织成更易读的格式,对于数据分析非常有帮助. Python 提供了将某些表格数据类型轻松转换为格式良好的纯文本表格的能力,这就是 tabulate 库. 2. 准备工作 安装tabulate库: 安装tabulate库非常容易,使用pip即可安装,代码如下: pip install tabulate 导入ta

  • Vue3中element-plus全局使用Icon图标的过程详解

    目录 1.安装图标库 2.注册 3.在组件中直接使用 4.在el-menu组件中动态使用 总结 Vue项目中使用Element-plus的Icon图标,包括按钮和动态菜单 1.安装图标库 npm install @element-plus/icons 2.注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' impo

  • 深入了解Vue3中侦听器watcher的实现原理

    目录 watch API 的用法 watch API实现原理 标准化source 构造回调函数 创建scheduler 创建effect 返回销毁函数 异步任务队列的设计 异步任务队列的创建 异步任务队列的执行 检测循环更新 优化:只用一个变量 watchEffect 注册无效回调函数 总结 在平时的开发工作中,我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑. 在 Vue.js 2.x 中,你可以通过 watch 选项去初始化一个侦听器,称作 watcher: export d

  • Vue3 中 watch 与 watchEffect 区别及用法小结

    目录 响应式依赖收集 Watch WatchEffect 什么时候用什么? 大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖.watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景. 你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的. watch- 显式指定依赖源,依赖源更新时执行回调函数 watchEffect - 自动收集依赖源,依赖源更新时重新执行自身 响应式依赖收集 首先先需要了解一下 vue 3

随机推荐