用户首次登录强制更改密码

这个系统每个新用户的初始密码都是后端分配的123456，要求用户初次登录此系统，就强制要求用户将密码修改为字母+数字，再用新密码才可登录；

封装了个组件，个人觉得校验规则写得比较全面，所以记录下分享给有需要的朋友；组件名为：FirstLoginDialog

先看效果图：

实现思路：

1、在登陆跳转前判断密码是否为初始密码，如果是的话就弹框修改，否则直接登录首页

// 判断密码是否为初始密码 123456
if(this.loginForm.password == '123456'){
this.$message.error('您是首次登录系统，请修改初始密码！')

   setTimeout(() => {
this.dialogTableVisible = true;

   }, 1500);

} else {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});

}

2、在修改密码的input校验规则中，设定必须要为字母＋数字，不可再为123456；

login父组件：

<FirstLoginDialog :dialogTableVisible="dialogTableVisible" @handleClose="handleClose" :username="this.loginForm.username"></FirstLoginDialog>

FirstLoginDialog子组件：

<!-- 首次登录系统，修改密码弹框  -->
<template>
<el-dialog ref="dailog" width="40%" title="初始密码修改" show-close :visible="dialogTableVisible"
:before-close="close" :close-on-click-modal="false">
<!-- 进度条 -->
<el-steps :active="active" align-center>
<el-step title="初次登录" />
<el-step title="修改初始密码" />
<el-step title="完成" />
</el-steps>
<!-- 第1步展示 -->
<div v-if="active == 1" style="color: red;text-align: center;line-height: 30px;font-weight: 700;margin: 10px 0;">

      您好，为了您的账号安全，请点击下一步修改初始密码
</div>
<!-- 第2、3步展示 -->
<div v-if="active != 3" style="width: 60%; margin: 0 auto;text-align:center">
<el-form ref="form" :model="user" status-icon :rules="rules">
<!-- 第1步展示 -->
<el-form-item v-show="active == 1" label="登陆账号">
<el-input v-model="username" :disabled="true" size="medium" />
</el-form-item>
<!-- 第2步展示 -->
<template v-if="active == 2">
<el-form-item label="旧密码" prop="oldPassword" class="password-item">
<el-input type="password" v-model="user.oldPassword" autocomplete="off" :show-password="true">
</el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword" class="password-item">
<el-input type="password" v-model="user.newPassword" autocomplete="off" :show-password="true"></el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="confirmPassword" class="password-item">
<el-input type="password" v-model="user.confirmPassword" :show-password="true" autocomplete="off"></el-input>
</el-form-item>
</template>
</el-form>
<!-- 第2、3步展示 -->
<div v-if="active != 1" slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')">上一步</el-button>
<el-button type="primary" @click="submit('form')">下一步</el-button>
</div>
<!-- 第1步展示 -->
<div v-else slot="footer" class="dialog-footer">
<el-button type="primary" style="width:75%" @click="nextTip">下一步</el-button>
</div>
</div>
<!-- 第3步展示 -->
<div v-if="active === 3" class="ImgTip" style="text-align: center;margin: 0 auto;">
<div style="margin:20px 0">
<img v-if="isSuccess === true" src="@/assets/images/password_2.png" alt="">
<img v-else src="@/assets/images/password_1.png">
</div>
<p v-if="isSuccess === true" style="margin: 20px 0;">修改密码成功</p>
<p v-else style="margin: 20px 0;">网络开小差了，密码修改失败，请重新修改</p>
<el-button v-if="isSuccess === true" type="primary" @click="close">重新登录</el-button>
<el-button v-else type="primary" @click="again">重新修改</el-button>
</div>
<!-- 第2步展示 -->
<div v-if="active == 2" class="tip" style="color: red;margin-top: 20px;">
<h4>温馨提示</h4>
<p style="margin: 5px">1、密码长度不能低于6个字符</p>
<p style="margin: 5px">2、密码必须由数字、英文字符组成</p>
</div>
</el-dialog>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
props: {
dialogTableVisible: {
type: Boolean,
default: false

    },
username: {
type: String,
default: ''

    },

  },

  data () {
// 验证规则
// 是否包含一位数字
const regNumber = /(?=.*[\d])/;
// 是否包含一位字母
const regLetter = /(?=.*[a-zA-Z])/;
// 是否包含一位特殊字符
// const regCharacter = /(?=.*[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、])/
// 校验新密码
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('新密码不能为空！请重新输入'))

      } else {
if (value.length > 16) {
callback(new Error('密码长度不超过16个字符。'))

        } else if (value.length < 6) {
callback(new Error('密码长度不低于6个字符。'))

        } else {
if (!/^[a-zA-Z\d]{1}/.test(value)) {
callback(new Error('密码必须以英文字母或数字开头！'))

          } else {
if (!regNumber.test(value)) {
callback(new Error('密码必须由数字，英文字母组成！'))

            } else if (!regLetter.test(value)) {
callback(new Error('密码必须由数字，英文字母组成！'))

            } else {
callback()

            }

          }

        }

      }

    }
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));

      } else if (value !== this.user.newPassword) {
callback(new Error('两次输入密码不一致!'));

      } else {
callback();

      }

    };
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined

      },
isSuccess: false,
active: 1,
// 表单校验
rules: {
newPassword: [

          { required: true, validator: validatePass, trigger: "blur" }

        ],
confirmPassword: [

          { required: true, validator: validatePass2, trigger: "blur" }

        ],
oldPassword: [

          { required: true, message: "旧密码不能为空", trigger: "blur" }

        ],

      },

    };

  },
methods: {

    nextTip () {
this.active += 1

    },

    resetForm () {
this.active -= 1

    },

    again () {
this.active = 1

    },

    submit () {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
if (response.code == 200) {
this.isSuccess = true

            } else {
this.isSuccess = false

            }
this.active = 3

          });

        }

      });

    },

    close () {
this.$emit('handleClose');

    },

  }

};
</script>
<style lang="scss" scoped></style>