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

在你登录的时候,获取到弱密码,然后将他存到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-dialog
      title="密码过期请修改密码"
      :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'
          })
        }
      );
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pyqt6入门案例

效果预览 hello.ui <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Dialog</class><widget class"QDialog" name"Dialog"><property name"geometry"><…

View function mapping is overwriting an existing endpoint function: home_page

这个错误是因为在你的 Flask 应用中,你定义了两个或多个视图函数,它们使用了相同的 endpoint 名称。Flask 不允许多个视图函数使用相同的 endpoint 名称,因为这会导致冲突。 通常,这个错误会出现在以下几种情况下: 你在不同的路由装饰器中使用了相同的 endpoint 名称。你…

不知道是该怎么引用多个函数片段?具体示例如代码

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

C++字符编码 cppp-reiconv库使用详解

经常写一些控制台小程序&#xff0c;常常会遇到输出中文乱码的问题&#xff0c;在windwos下可以使用MultiByteToWideChar转换字符编码&#xff0c;但跨平台就需要cppp-reiconv这样的第三方字符编码处理库&#xff0c;且开源。 一、下载cppp-reiconv库的源码和静/动态库 GitHu…

从0开始实现一个博客系统 (SSM 实现)

相关技术 Spring Spring Boot Spring MVC MyBatis Html Css JS pom 文件我就不放出来了, 之前用的 jdk8 做的, MySQL 用的 5.7, 都有点老了, 你们自己看着配版本就好 实现功能 用户注册 - 密码加盐加密 (md5 加密)前后端用户信息存储 - 令牌技术用户登录 - (使用 拦截…

Java进阶学习笔记15——接口概述

认识接口&#xff1a; Java提供了一个关键字Interface&#xff0c;用这个关键字我们可以定义一个特殊的结构&#xff1a;接口。 接口不能创建对象。 注意&#xff1a;接口不能创建对象&#xff0c;接口是用来被类实现&#xff08;implements&#xff09;的&#xff0c;实现接口…

04Django项目基本运行逻辑及模板资源套用

对应视频链接点击直达 Django项目用户管理及模板资源 对应视频链接点击直达1.基本运行逻辑Django的基本运行路线&#xff1a;视图views.py中的 纯操作、数据返回、页面渲染 2.模版套用1.寻找一个好的模版2.模板部署--修改适配联动 OVER&#xff0c;不会有人不会吧不会的加Q1394…

光伏项目怎么做预算?

随着可再生能源行业的蓬勃发展&#xff0c;光伏行业也得到了扩张。许多想要加入光伏项目投资的人&#xff0c;都在为怎样为项目做预算而苦恼&#xff0c;今天我就来跟大家分析下可以怎么做。 一、了解市场需求&#xff0c;确定预算目标 在制定光伏项目预算方案之前&#xff0c…

三前奏:获取/ 读取/ 评估数据【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 前面的博客 数据分析—技术栈和开发环境搭建 …

NASA数据——AIRS 颗粒地图产品包括 PDF 和 JPG 格式的颗粒覆盖图像

AIRS/Aqua Granule map product V005 (AIRXAMAP) at GES DISC 美国国家航空航天局 Aqua 卫星上的大气红外探测器 AIRS是美国宇航局Aqua卫星上的大气红外探测器&#xff0c;每天在全球范围内收集地球表面和大气层发射的红外能量。其数据提供了大气柱中温度和水蒸气的三维测量值…

服务器数据恢复—RAID5阵列崩溃如何恢复上层OA和oracle数据库的数据?

服务器数据恢复环境&故障&#xff1a; 某公司的一台服务器中的raid5磁盘阵列有两块磁盘先后掉线&#xff0c;服务器崩溃。故障服务器的操作系统为linux&#xff0c;操作系统部署了oa&#xff0c;数据库为oracle。oracle数据库已经不再对该oa系统提供后续支持&#xff0c;用…

解决移植Metasploitable3到VM虚拟机无网络的问题

第一步 导入后不要开机&#xff0c;先在虚拟机设置里面将原有的两个网络适配器移除。 第二步 接着在选项里面&#xff0c;在客户机操作系统里面&#xff0c;选择Microsoft Windwos(W)&#xff0c; 版本选择Windows Server 2008 R2 x64 第三步 先打开虚拟机&#xff0c;然后…

2024-05学习笔记

最近的学习大多都是和mysql的索引相关的 1.mvcc mvcc是不需要手动配置&#xff0c;是mysql的一个机制 在事务开启时&#xff0c;对涉及到的数据加一个隐藏列&#xff0c;隐藏列对应的值&#xff0c;就是事务id 如果当前是修改操作&#xff0c;就copy一份原来的数据到新的一行…

网络安全架构之零信任安全

网络安全架构之零信任安全 文章目录 网络安全架构之零信任安全零信任安全时代背景安全世界“新旧时代”各种攻击风险层出不穷网络安全边界逐渐瓦解内外部威胁愈演愈烈 零信任架构零信任的理念在不可信的网络环境下重建信任构建自适应内生安全机制以身份为基石业务安全访问持续信…

躺赚零撸项目,看广告赚红包,零门槛提现,秒到账,单机每日100+

这个项目是跟广告商直接对接的&#xff0c;跟以前小游戏看广告差不多&#xff0c;看完广告得金币5000个兑换5毛钱。 不过这个是可以直接提现&#xff0c;而是无门槛就可以提&#xff0c;有设备就可以操作&#xff0c;有空边看连续剧边刷也是挺香的&#xff0c;单机可以达到100…

今日好料推荐(AI工业革命 + 产业级数据治理白皮书)

参考资料在文末获取&#xff0c;关注我&#xff0c;获取优质资源。 《ChatGPT&#xff1a;AI工业革命》 《ChatGPT&#xff1a;AI工业革命》是一本深入探讨人工智能技术&#xff0c;尤其是ChatGPT及其背后的GPT-4架构在各个领域中应用的书籍。这本书不仅详细介绍了ChatGPT的发…

[DDR5 Jedec] 2-1 引脚与PCB布线规范

7500字&#xff0c;依公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入理解DDR》 1 DDR5 颗粒 X4 X8 X16 这里的 X8 or X16&#xff0c; 可以理解为一个DRAM芯片有几个存储阵列。“X几”。进行列寻址时会同时从几个阵列的同一个坐标位置读出数据bit来&a…

三、自定义信号和槽函数(无参和有参)

需求&#xff1a; 下班后&#xff0c;小明说请小红吃好吃的&#xff0c;随便吃&#xff0c;吃啥买啥 无参&#xff1a;小红没有提出吃啥 有参&#xff1a;小红提出自己想吃的东西&#xff0c;吃啥取决于一时兴起&#xff08;emit触发&#xff09; 思路&#xff1a; 1&#xff…

【传知代码】用二维图像渲染3D场景视频-论文复现

文章目录 概述原理介绍模型介绍环境配置/部署方式安装环境准备数据训练&#xff08;train&#xff09;评估&#xff08;eval&#xff09;渲染&#xff08;render&#xff09; 小结 论文地址 本文涉及的源码可从用二维图像渲染3D场景视频该文章下方附件获取 概述 **NeRF&#…

学习使用博客记录生活

学习使用博客记录生活 新的改变 今天新的开始&#xff0c;让我用图片开始记录吧 看这个背景图片怎么样