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

这个系统每个新用户的初始密码都是后端分配的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>