在做用户重置密码时,1)需要对输入的密码进行验证;2)需要对输入的旧密码进行判断是否跟数据表里的是一样的
1)前段代码如下
<template>
<el-dialog title="重置密码" :visible.sync="dialogVisible" :append-to-body="true"
width="25%" top="30vh">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="旧密码" prop="oldPwd">
<el-input v-model="ruleForm.oldPwd" style="width:90%"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPwd">
<el-input type="password" v-model="ruleForm.newPwd" show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPwd">
<el-input type="password" v-model="ruleForm.checkPwd"show-password></el-input>
</el-form-item>
<el-form-item style="margin-left:30%">
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
import { resetPwd } from "@/api/system/user";
export default {
data() {
var validateOld = (rule, value, callback) => {
if (!value) {
callback(new Error('旧密码不能为空'));
}else{
callback();
}
};
var validateNew = (rule, value, callback) => {
let reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
if (value === '') {
callback(new Error('请输入密码'));
} else if(!reg.test(value)||value.length<6||value.length>12){
callback(new Error('密码必须为6-12位的数字和字母的组合'));
}else {
if (this.ruleForm.checkPwd !== '') {
this.$refs.ruleForm.validateField('checkPwd');
}
callback();
}
};
var validateCheck = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.newPwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
dialogVisible: false,
ruleForm: {
oldPwd: '',
newPwd: '',
checkPwd: ''
},
rules: {
newPwd: [
{ required: true, message:"请输入新密码", trigger: 'blur' },
{ validator: validateNew, trigger: 'blur' }
],
checkPwd: [
{ required: true, message:"请输入旧密码", trigger: 'blur' },
{ validator: validateCheck, trigger: 'blur' }
],
oldPwd: [
{ required: true, message:"请输入旧密码", trigger: 'blur' },
{ validator: validateOld, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
var userName = this.$store.getters.name;
this.ruleForm.userName = userName;
resetPwd(this.ruleForm).then((res) => {
this.$Msg.successMsg("密码重置成功");
this.dialogVisible = false;
this.$store.dispatch("LogOut").then(() => {
location.href = "/index";
});
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
}
}
</script>
2)后台代码
后台操作 首先验证输入的旧密码是否正确
使用 BCryptPasswordEncoder的match方法;
参数1是原始的没有经过加密的,参数2是从用户表中提取的之前加密的密码
public AjaxResult resetPwd(String userName, String oldPwd, String newPwd) {
BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
String tbPwd = userMapper.selectUserByUserName(userName).getPassword();
if(bCryptPasswordEncoder.matches(oldPwd,tbPwd)){
newPwd = SecurityUtils.encryptPassword(newPwd);
userMapper.resetPwd(userName, newPwd);
return AjaxResult.success();
}else{
return AjaxResult.error("输入的旧密码不正确");
}
}