弱密码系统登录之后强制修改密码

在你登录的时候,获取到弱密码,然后将他存到vuex里面,在登录进去之后,index页面再去取,思路是这样的

一、vuex里面定义密码字段

我是直接在user.js里面写的

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'const user = {state: {passwordY: ''},mutations: {SET_PASSWORD: (state, passwordY) => {state.passwordY = passwordY},},actions: {Cun_PASSWORD({ commit },name){commit('SET_PASSWORD',name)},}
}export default user

 也可以新建一个哈都一样

二、登录的时候存输入的密码

利用this.$store.dispatch去存,Cun_PASSWORD这个就是我actions里面的方法,this.loginForm.password就是存入的密码

this.$store.dispatch('Cun_PASSWORD', this.loginForm.password)

 三、首页取密码并且做验证

在mouted里面是可以获取到存储到vuex里的密码this.$store.state.user.passwordY(user是我刚刚放到user.js里面了,根据你写的变哈)

  mounted() {this.mima(this.$store.state.user.passwordY)}

methods里面写验证方法 

  methods: {mima(value){if(!/[0-9]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[^0-9a-zA-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (value.length < 8 || value.length > 50) {this.$refs.passwordModal.open()}},},

 如果是不符合密码规则,就弹出来,下面是弹出层组件

四、弹出层组件

<template><el-dialogtitle="密码过期请修改密码":visible.sync="dialogVisible":close-on-click-modal="false":close-on-press-escape="false"><el-form :model="passwordForm" :rules="rules" ref="passwordFormRef" label-width="100px"><el-form-item label="旧密码" prop="oldPassword"><el-input type="password" v-model="passwordForm.oldPassword" autocomplete="off"  show-password></el-input></el-form-item><el-form-item label="新密码" prop="newPassword"><el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"  show-password></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input type="password" v-model="passwordForm.confirmPassword" autocomplete="off"  show-password></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button type="primary" @click="confirmPassword">确 定</el-button></span></el-dialog></template><script>export default {data() {return {dialogVisible: false,passwordForm: {oldPassword: '',newPassword: '',confirmPassword: ''},rules: {oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" },{ min: 8, max: 20, message: "长度在 8 到 20 个字符", trigger: "blur" },{ validator: this.equalToOldPassword, trigger: "blur" },{validator: (rule, value, callback) => {const regexPattern = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]*$/;             if (!regexPattern.test(value)) {callback(new Error("密码至少包含三种字符类型:小写字母、大写字母、数字和特殊字符"));} else {callback(); // 这里调用callback来表示验证通过}},trigger: "blur"}],confirmPassword: [{ required: true, message: '请确认新密码', trigger: 'blur' },{ validator: this.validateConfirmPassword, trigger: 'blur' }]}};},methods: {validateConfirmPassword(rule, value, callback) {if (value !== this.passwordForm.newPassword) {callback(new Error('两次输入密码不一致!'));} else {callback();}},equalToOldPassword (rule, value, callback)  {if (this.passwordForm.oldPassword == value) {callback(new Error("禁止重复使用上次旧密码"));} else {callback();}},confirmPassword() {// 验证表单this.$refs.passwordFormRef.validate((valid) => {if (valid) {// 调用修改密码的方法this.$parent.updatePassword(this.passwordForm)}});},open() {this.dialogVisible = true; // 假设你使用了Element UI的Dialog组件},}};</script><style scoped>::v-deep .el-dialog__headerbtn {display: none !important; /* 使用 !important 确保样式覆盖 */}</style>

在index里引用

  <PasswordModal ref="passwordModal" />
import PasswordModal from "@/components/PasswordModal/index.vue";components: {PasswordModal},

index里面加一个改密码的方法 

methods: {mima(value){if (value === "") {this.$message.warning("请输入密码");} else if (!/[0-9]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[^0-9a-zA-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (value.length < 8 || value.length > 50) {this.$refs.passwordModal.open()}},updatePassword(passwordForm) {
//这个接口是你自己修改密码的接口!记得改updateUserPwd(passwordForm.oldPassword, passwordForm.newPassword).then((response) => {this.$modal.msgSuccess("修改成功");this.$store.dispatch('LogOut').then(() => {location.href = '/index'})});},methods: {mima(value){if (value === "") {this.$message.warning("请输入密码");} else if (!/[0-9]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[^0-9a-zA-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (value.length < 8 || value.length > 50) {this.$refs.passwordModal.open()}},updatePassword(passwordForm) {updateUserPwd(passwordForm.oldPassword, passwordForm.newPassword).then((response) => {this.$modal.msgSuccess("修改成功");this.$store.dispatch('LogOut').then(() => {location.href = '/index'})});},

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

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

相关文章

【MySQL进阶之路 | 基础篇】存储过程

1. 存储过程概述 (1). 含义 : 存储过程就是一组经过预先编译的SQL语句的封装. (2). 执行过程 : 存储过程预先存储在MySQL服务器上&#xff0c;需要执行的时候&#xff0c;客户端只需要向服务器端发送调用存储过程的命令&#xff0c;服务器端就可以把预先存储好的这一系列SQL语…

推荐一款媒体影音嗅探神器—Chrome扩展插件(猫抓cat-catch)

目录 1.1、前言1.2、下载地址1.3、github Releases 版本说明1.4、安装步骤1.5、猫抓插件常规设置1.5.1、设置抓取文件的类型1.5.2、设置抓取文件的后缀名 1.1、前言 我们在日常上网的过程中&#xff0c;很多音频、视频网站下载资源都非常不方便&#xff0c;要么需要安装客户端&…

jvm的类加载

文章目录 概要加载类加载器分类双亲委派模型自定义加载器 验证准备解析初始化<cinit>与<init> 概要 jvm运行时的整体结构如下 一个Car类&#xff0c;类跟Car对象的转换过程如下&#xff1a; 加载后的class类信息存放于方法区&#xff1b;ClassLoader只负责clas…

5.25机器人基础-空间描述和变换1

参考资料&#xff1a;《机器人学导论》John.J.Craig 彻底搞懂“旋转矩阵/欧拉角/四元数”&#xff0c;让你体会三维旋转之美_欧拉角判断动作-CSDN博客 机器人操作的定义是指通过某种机构使零件和工具在空间运动。因此&#xff0c;对于坐标系的定义显得尤为重要&#xff0c;相…

Mysql搭建主从同步,docker方式(一主一从)

服务器&#xff1a;两台Centos9 用Docker搭建主从 使用Docker拉取MySQL镜像 确保两台服务器都安装好了docker 安装docker请查看&#xff1a;Centos安装docker 1.两台服务器都先拉取mysql镜像 docker pull mysql 2.我这里是在 /opt/docker/mysql 下创建mysql的文件夹用来存…

基于STM32实现智能水族箱控制系统

目录 引言环境准备智能水族箱控制系统基础代码示例&#xff1a;实现智能水族箱控制系统 水温传感器数据读取水泵与加热器控制水位传感器数据读取用户界面与显示应用场景&#xff1a;水族箱管理与环境控制问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌…

网络布线与数制转换

信号与传输介质 信号概述 什么是信号 信息 人对现实世界事物存在方式或运动状态的某种认识 数据 用于描述事物的某些属性的具体量值 信号 信息传递的媒介 例如&#xff0c;描述某一件物体&#xff0c;它的长、宽、高、质地、颜色、气味等就是用以形容该物体的数据。通…

深度学习——自己的训练集——图像分类(CNN)

图像分类 1.导入必要的库2.指定图像和标签文件夹路径3.获取文件夹内的所有图像文件名4.获取classes.txt文件中的所有标签5.初始化一个字典来存储图片名和对应的标签6.遍历每个图片名的.txt文件7.随机选择一张图片进行展示8.构建图像的完整路径9.加载图像10.检查图像是否为空 随…

网络安全从入门到精通(特别篇I):应急响应之不同平台后门排查思路

Windows-后门-常规&权限维持&内存马 Linux-后门-常规&权限维持&Rootkit&内存马 Windows实验 1、常规MSF后门-分析检测 2、权限维持后门-分析检测 3、Web程序内存马-分析检测 常见工具集合: https://mp.weixin.qq.com/s/L3Lv06bFdUX_ZE4rS69aDg 常规…

RAG系统-主流向量数据库

主流向量数据库功能对比 FAISS: Meta 开源的向量检索引擎 https://github.com/facebookresearch/faissPinecone: 商用向量数据库&#xff0c;只有云服务 https://www.pinecone.io/Milvus: 开源向量数据库&#xff0c;同时有云服务 https://milvus.io/Weaviate: 开源向量数据库&…

小程序迁移主体变更流程全攻略

小程序迁移变更主体有什么作用&#xff1f;有些小程序开发者&#xff0c;因为业务调整&#xff0c;或者公司更换&#xff0c;需要更换小程序主体&#xff01;但是很多开发者对于小程序更换主体的操作流程并不熟悉&#xff0c;于是我们专门准备了这篇&#xff0c;关于小程序更换…

可以在搜索结果中屏蔽指定网站的插件

可以在搜索结果中屏蔽指定网站的插件 | LogDict背景 在搜索引擎中搜索问题, 往往充斥各种无效内容 比如搜个技术类的问题, 前几页CSDN, 百度百家号, 百度经验, 百度知道, 腾讯云各类云爬的水文 CSDN基本都是复制粘贴的, 甚至格式都乱码了, 虽然我以前也干过 要复制粘贴无所谓, …

机器重启oracle数据库自动启动异常

业务连接报ora-01033&#xff1a; 检查服务器&#xff0c;发现有重启记录&#xff0c;oracle进程存在&#xff0c;数据库状态处于mount状态&#xff0c;检查日志&#xff0c;发现在数据库启动时没有正常open&#xff1a; 连入数据库&#xff1a;Select * from v$backup 发现数…

初步认识栈和队列

Hello&#xff0c;everyone&#xff0c;今天小编讲解栈和队列的知识&#xff01;&#xff01;&#xff01; 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&…

阅读《HTTP权威指南》:重温HTTP基础。

HTTP权威指南&#xff1a;重温HTTP基础。 第一章、HTTP概述 第二章、URL与资源 通用URL组件是指构成URL&#xff08;统一资源定位符&#xff09;的一些基本部分。这些组件共同作用&#xff0c;指向一个特定的资源。URL的标准格式是&#xff1a; scheme://username:passwordhos…

简单操作一单利润500+,最新快手缺货赔付玩法,【找店教程+详细教程】

在如今快速变化的时代&#xff0c;寻找充满创新的收入来源已经成为了一种趋势。这不仅是为了实现财务的自由&#xff0c;更是为了在生活中拥有更多的选择权。一项革新的实践——利用手机进行快手缺货赔付单号的操作&#xff0c;已经成为许多人稳定“下车”的一个新途径。 据了…

python画图:matpolt,设置图片尺寸,字体大小,副坐标轴,保存

文章重心: 写论文的时候,图片的大小,字体的大小,副坐标轴,这些都是很重要的因素,保存一下之前用过的画图代码单图多图(两个子图)堆叠柱状图两个Y轴的图问题: python保存的时候,我选择的是svg,但是这样图片会比较大,查重什么的需要把图片都删了(一般有文件大小限制…

LangChain笔记

很好的LLM知识博客&#xff1a; https://lilianweng.github.io/posts/2023-06-23-agent/ LangChain的prompt hub: https://smith.langchain.com/hub 一. Q&A 1. Q&A os.environ["OPENAI_API_KEY"] “OpenAI的KEY” # 把openai-key放到环境变量里&…

protobuf —— 认识和安装

protobuf —— 认识和安装 什么是序列化和反序列化有哪些常见的什么是序列化和反序列化工具Protobuf安装安装依赖开始安装 连接动态库一些遗留问题 我们今天来看一个序列化和反序列化的工具&#xff1a;protobuf。 什么是序列化和反序列化 序列化&#xff08;Serialization&a…

【uni-best+UView】使用mitt实现自定义错误对话框

痛点 目前在设计一个uni-best的前端全局的异常提示信息&#xff0c;如果采用Toast方式&#xff0c;对微信支持的不友好。微信的7中文长度连个NPE信息都无法完整显示&#xff0c;更不用提Stacktrace的复杂报错了。如果使用对话框&#xff0c;必须在页面先预先定义&#xff0c;对…