vue 后台管理系统登录 记住密码 功能(Cookies实现)

安装插件  

import Cookies from 'js-cookie'

组件引入

import Cookies from 'js-cookie';

存值:

   Cookies.set('username', state.account, { expires: 30 });
// username 存的值的名字,state.account 存的值  expires 存储的时间,30天Cookies.set('password', state.password, { expires: 30 });Cookies.set('rememberMe', state.rememberMe, { expires: 30 });

取值:

  const username = Cookies.get('username');const password = Cookies.get('password');const rememberMe = Cookies.get('rememberMe');

登录记住密码的逻辑

function handleLogin() { // 登录if (state.account && state.password) {if (state.rememberMe) { // 记住密码被勾选Cookies.set('username', state.account, { expires: 30 });Cookies.set('password', state.password, { expires: 30 });Cookies.set('rememberMe', state.rememberMe, { expires: 30 });} else { // 记住密码取消勾选// 否则移除Cookies.remove('username');Cookies.remove('password');Cookies.remove('rememberMe');}router.push('/')ElMessage.success('登录成功')} else {ElMessage.warning('请输入账号密码')}};function getCookie() {const username = Cookies.get('username');const password = Cookies.get('password');const rememberMe = Cookies.get('rememberMe');state.account = username === undefined ? state.account : usernamestate.password = password === undefined ? state.password : passwordstate.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
};getCookie();

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

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

相关文章

Python图像处理基础

文章目录 一、图像处理概二、图像分类三、openCV图像处理基础3.1 OpenCV 读取与显示图像3.2 openCV像素处理3.3 openCV创建图像、复制图像3.4 openCV保存图像3.5 openCV 绘制各种几何图形四、图像算术与逻辑运算4.1 图像加法运算4.2 图像减法运算4.3 图像与运算4.4 图像或运算4…

mysql sql_mode数据验证检查

sql_mode 功能 sql_mode 会影响MySQL支持的sql语法以及执行的数据验证检查。通过设置sql_mode ,可以完成不同严格程度的数据校验,有效地保障数据准确性 sql_mode 严格模式 VS 宽松模式 宽松模式 比如,插入的数据不满足 表的数据类型,也可能…

2023年高教社杯 国赛数学建模思路 - 案例:ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法,就是频繁模…

opencv 车牌号的定位和识别+UI界面识别系统

目录 一、实现和完整UI视频效果展示 主界面: 识别结果界面:(识别车牌颜色和车牌号) 查看历史记录界面: 二、原理介绍: 车牌检测->图像灰度化->Canny边缘检测->膨胀与腐蚀 边缘检测及预处理…

Vue3(开发h5适配)

在开发移动端的时候需要适配各种机型&#xff0c;有大的&#xff0c;有小的&#xff0c;我们需要一套代码&#xff0c;在不同的分辨率适应各种机型。 因此我们需要设置meta标签 <meta name"viewport" content"widthdevice-width, initial-scale1.0">…

第十四课:采用 Qt 开发翻页/分页/多页窗体组件

功能描述&#xff1a;采用 Qt 开发一个翻页/分页/多页的窗体组件&#xff0c;封装为 QWidget 的子类&#xff0c;在你的应用程序中可直接使用。 一、最终演示效果 本次制作的翻页/分页/多页窗体组件是基于 Qt 开发&#xff0c;整个程序封装成 PageWidget 类&#xff0c;继承于…

如何以CPU方式启动Stable Diffusion WebUI?

默认情况下Stable Diffusion WebUI采用GPU模式运行&#xff0c;但是稍微运行起来就知道至少需要4G的显存&#xff0c;2G显存虽然能够通过带--lowvram运行起来&#xff0c;但是能够炼出来的图基本都是512x512的&#xff0c;不能够炼大图&#xff0c;如果你刚好和我一样家境贫寒&…

node+mysql+express基础应用

介绍 1.express 为不同 URL 路径中使用不同 HTTP 动词的请求&#xff08;路由&#xff09;编写处理程序。集成了“视图”渲染引擎&#xff0c;以便通过将数据插入模板来生成响应。设置常见 web 应用设置&#xff0c;比如用于连接的端口&#xff0c;以及渲染响应模板的位置。在…

【微信红包】Axure聊天发红包原型图,含流程图和PRD产品文档

作品概况 页面数量&#xff1a;共 60 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;聊天软件、社交软件 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为「发红包」的原型设计图&#xff0c…

js this 指的是什么

1 对象中方法 函数中的this 指的是包含它的对象, 子对象中的this指的是全局在浏览器中是 window 对象 var obj1 {this1funcA: function() {var obj2 {innerFunc: function() {this2}};obj3{ this3 }}obj4{ this4 } }; 在这个对象中&#xff0c;this 的指向会随着调用上…

分布式之CAP理论与BASE理论

CAP理论 CAP:一致性&#xff08;consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错&#xff08;partition-tolerance&#xff09;。CAP定律说的是在一个分布式计算机系统中&#xff0c;一致性&#xff0c;可用性和分区容错性这三种保证无法同时…

Linux_4_文本处理工具和正则表达式

目录 1文本编辑工具之神VIM1.1 vi和vim简介1.2使用vim1.2.1 vim 命令格式1.2.2三种主要模式和转换 1.3扩展命令模式1.3.1扩展命令模式基本命令1.3.2 地址定界1.3.3查找并替换1.3.4定制vim的工作特性1.3.4.1行号1.3.4.2忽略字符的大小写1.3.4.3白动缩进1.3.4.4复制粘贴保留格式1…

商城-学习整理-集群-K8S-集群环境部署(二十四)

目录 一、MySQL集群1、mysql集群原理2、Docker安装模拟MySQL主从复制集群1、下载mysql镜像2、创建Master实例并启动3、创建 Slave 实例并启动4、为 master 授权用户来同步数据1、进入 master 容器2、进入 mysql 内部 &#xff08;mysql –uroot -p&#xff09;3、查看 master 状…

Haproxy+Keepalive 整合rabbitmq实现高可用负载均衡

Haproxy 实现负载均衡 HAProxy 提供高可用性、负载均衡及基于 TCPHTTP 应用的代理&#xff0c;支持虚拟主机&#xff0c;它是免费、快速并且可靠的一种解决方案&#xff0c;包括 Twitter,Reddit,StackOverflow,GitHub 在内的多家知名互联网公司在使用。HAProxy 实现了一种…

Oracle触发器发送邮件

Oracle触发器发送邮件 一、创建触发器tr_yw_info_beforeinsert二、创建触发器tr_yw_info_beforeupdate三、发送邮件存过&#xff1a;send_mail() 一、创建触发器tr_yw_info_beforeinsert CREATE OR REPLACE TRIGGER tr_yw_info_beforeinsertBEFORE INSERT ON yw_infoFOR EACH …

R语言15-R语言中的列的分裂与合并长宽数据转换

列的分裂与合并 列的分裂&#xff1a; 使用 separate() 函数将一个包含多个值的列分裂成多个列。 install.packages("tidyr") # 安装 tidyr 包&#xff08;如果尚未安装&#xff09; library(tidyr)data <- data %>%separate(col_name, into c("part1…

响应式web-PC端web与移动端web(H5)兼容适配 选型方案

背景 项目需要&#xff0c;公司已经有一套PC端web&#xff0c;需要做一套手机端浏览器可用的&#xff0c;但是又想兼容pc端&#xff0c;适配的web项目。 以下是查阅到响应布局现成的开源模版。根据自己技术栈&#xff0c;vue2,js来搜索相关的开源项目。 RuoYi 使用若依快速…

[数据集][目标检测]垃圾目标检测数据集VOC格式14963张44类别

数据集格式&#xff1a;Pascal VOC格式(不包含分割的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;14963 标注数量(xml文件个数)&#xff1a;14963 标注类别数&#xff1a;44 标注类别名称:["toiletries","plastic utensi…

【LeetCode75】第三十七题 二叉树中的最长交错路径

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一棵二叉树&#xff0c;问我们在这棵树里能找到的最长交错路径。最长交错路径就是在二叉树里一左一右一左一右这样走&#xff0c;最…

[国产MCU]-W801开发实例-ADC与芯片温度采集

ADC与芯片温度采集 文章目录 ADC与芯片温度采集1、ADC模块介绍2、W801中ADC的驱动API介绍3、硬件准备4、软件准备5、采集输入电压及芯片温度本文将详细介绍如何使用W801的ADC模块,并通过ADC模块采集W801内置温度值。 1、ADC模块介绍 W801的ADC基于Sigma-Delta ADC采集模块,最…