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

在你登录的时候,获取到弱密码,然后将他存到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.rhkb.cn/news/332809.html

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

相关文章

动手学深度学习22 池化层

动手学深度学习22 池化层 1. 池化层2. 实现3. QA 课本&#xff1a; https://zh-v2.d2l.ai/chapter_convolutional-neural-networks/pooling.html 视频&#xff1a; https://www.bilibili.com/video/BV1EV411j7nX/?spm_id_fromautoNext&vd_sourceeb04c9a33e87ceba9c9a2e5f0…

清理mysql binglog文件

mysql随着使用时间的推移&#xff0c;binglog文件会越来越大&#xff0c;比如我们的oa系统&#xff0c;上线4年多了&#xff0c;最近总有磁盘空间满影响系统正常使用的情况出现。检查后发现binglog是罪归祸首。 binglog文件最好不要采用应删除的方式清理&#xff0c;如下方式可…

X-CSV-Reader:一个使用Rust实现CSV命令行读取器

&#x1f388;效果演示 ⚡️快速上手 依赖导入&#xff1a; cargo add csv读取实现&#xff1a; use std::error::Error; use std::fs::File; use std::path::Path;fn read_csv<P: AsRef<Path>>(filename: P) -> Result<(), Box<dyn Error>> {le…

【机器学习】——线性模型

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

Blender人物插件Human Generator Ultimate下载及打开方式

一、Blender介绍及安装 Blender是一款免费开源三维图形图像软件&#xff0c;提供从建模、动画、材质、渲染、到音频处理、视频剪辑等一系列动画短片制作解决方案。 安装方式非常简单&#xff0c;官网下载即可&#xff0c;截止到2024年5月&#xff0c;Blender以更新至4.1版本了…

Bonfire - [Asset for Zibra Smoke Fire]

Bonfire资产支持URP、BRP和HDRP渲染管道,可以用作VFX或游戏元素。 这种环境资产可用于增强视觉故事性,以及创建自定义游戏机制,为虚拟世界增加互动性和真实性。 全交互:使用Zibra Smoke&Fire进行实时烟雾模拟。 易于使用:您所需要做的就是购买资产并将其放入场景中。不…

深入分析 Android Activity (六)

文章目录 深入分析 Android Activity (六)1. Activity 的权限管理1.1 在 Manifest 文件中声明权限1.2 运行时请求权限1.3 处理权限请求结果1.4 处理权限的最佳实践 2. Activity 的数据传递2.1 使用 Intent 传递数据2.2 使用 Bundle 传递复杂数据 3. Activity 的动画和过渡效果3…

技术面‍:前端代码是如何与服务器交互的

前言&#xff1a; 本篇文章主要是想讲解 .html 文件和 .CSS 文件在实际开发中和后端服务器交互最后上线的基础原理。 面向的人群&#x1f195;&#xff1a;是刚入行不久&#xff0c;且目前只会写前端业务代码而不清楚整个工作流的前端新人。我会从 0 开始一步一步带你理解整个…

当HR问你是否单身时,该怎么回答?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测技术社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;我是晶圆厂厂务工程师&#xff0c;最近在面试新工作&#xff0c;但是几乎每家HR都会问我同一个问题&#xff1a;你结婚没有&#xff1…

短剧平台开发中的常见误区及避坑指南,别再走弯路

1. 误区一&#xff1a;只注重外观&#xff0c;忽视技术基础 在短剧平台开发中&#xff0c;一个常见的误区是过于注重产品的外观设计&#xff0c;而忽视了技术基础的重要性。团队往往会投入大量精力和资源来打造吸引人的UI和炫酷的特效&#xff0c;但忽略了系统架构、性能优化和…

听说京东618裁员?所以日常准备很重要呀

文末有最少必要的面试题&#xff0c;还准备了离线 PDF 版本。 京东也要向市场输送人才了? 这几天看到技术群里不少朋友在讨论京东裁员相关的信息。 我去看了下京东近期的操作&#xff0c;京东内部考勤调整和午休时间缩短&#xff0c;以及强化打卡机制等管理调整&#xff1b;有…

腾讯Java社招面试题真题,最新面试题

Java中synchronized和ReentrantLock有什么区别&#xff1f; 1、锁的实现方式不同&#xff1a; synchronized是JVM层面的锁&#xff0c;主要依赖于监视器对象&#xff08;monitor&#xff09;实现。ReentrantLock是JDK层面的锁&#xff0c;通过Java代码实现&#xff0c;提供了更…

echarts- 热力图, k线图,雷达图

热力图 热力图可以看成是一种矩形的散点图。 热力图的矩形受itemStyle的影响。 通常配合visualmap组件来根据值的大小做颜色的变化。 热力图主要通过颜色去表现数值的大小&#xff0c;必须要配合 visualMap 组件使用。 visualMap:视觉映射组件 let options {tooltip: {},xAx…

Kali的基本扫描命令

nmap -sP 192.168.10.0/24 //扫描10网段存活的主机 nmap -P 192.168.10.142 //扫描主机开放的端口 nmap -sS 192.168.10.142 //TCP半开扫描 nmap -sT 192.168.10.142 //TCP全开扫描 nmap -O 192.168.10.142 //扫描靶机的操作系统类型 nmap -sV 192.168.10.142 //扫描开放端口对…

使用Prometheus组件node_exporter采集linux系统的指标数据(包括cpu/内存/磁盘/网络)

一、背景 Linux系统的基本指标包括cpu、内存、磁盘、网络等&#xff0c;其中网络可以细分为带宽进出口流量、连接数和tcp监控等。 本文使用Prometheus组件node_exporter采集&#xff0c;存储在promethues&#xff0c;展示在grafana面板。 二、安装node_exporter 1、下载至本…

Bean 的生命周期的各个阶段

Bean的生命周期通常可以归结为以下几个阶段&#xff1a; 1.实例化&#xff08;Instantiation&#xff09;&#xff1a; Spring根据Bean的定义&#xff08;如XML配置、Java配置或注解&#xff09;来实例化Bean&#xff0c;这个阶段会分配内存空间给Bean&#xff0c;生成一个原始…

微服务:Ribbon负载均衡与加载时机修改

Ribbon 负载均衡 执行流程 负载均衡策略 调整负载均衡方案&#xff1a; 配置类中&#xff08;全局&#xff09;&#xff1a; // 负载均衡策略Beanpublic IRule randomRule() {return new RandomRule();}yaml配置 userservice: # 给某个微服务配置负载均衡规则&#xff…

Mac 安装 git

文章目录 前言一、介绍二、下载三、验证四、配置五、Git常用命令六、git提交和撤销工作流程代码提交和提交同步代码撤销和撤销同步 FAQ1.homebrew 下载解决方法一&#xff08;强烈推荐&#xff09;&#xff1a;解决方法二&#xff1a; 总结 前言 Git 是一个开源的分布式版本控…

Fastadmin框架使用phpstudy部署,部分页面404无法显示

背景 在windows系统下&#xff0c;使用phpstudy部署fastadmin框架&#xff0c;会部分页面404无法访问。 解决方案 原来是要用伪静态&#xff0c;自己看官方视频时喜欢跳着看&#xff0c;刚好漏了&#xff0c;这里记录下。 依次点击如下&#xff1a; 如果你是Apache&#xf…

使用libtorch加载YOLOv8生成的torchscript文件进行目标检测

在网上下载了60多幅包含西瓜和冬瓜的图像组成melon数据集&#xff0c;使用 LabelMe 工具进行标注&#xff0c;然后使用 labelme2yolov8 脚本将json文件转换成YOLOv8支持的.txt文件&#xff0c;并自动生成YOLOv8支持的目录结构&#xff0c;包括melon.yaml文件&#xff0c;其内容…