©2020-2024 ioDraw All rights reserved
一、需求分析
当点击修改密码时，弹出修改密码框，向数据库中查询原密码，正确时才允许修改，修改完，点击确定时，更新密码。
二、创建修改密码模板
1.在头部组件里：
<!-- 修改密码弹出框 --> <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
<el-form :model="form" ref="pwdForm" :rules="rules"> <el-form-item label="原密码"
prop="password"> <el-input v-model="form.password"
autocomplete="off"></el-input> </el-form-item> <el-form-item label="新密码"
prop="newPassword"> <el-input v-model="form.newPassword"
autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码"
prop="checkPassword"> <el-input v-model="form.checkPassword"
autocomplete="off"></el-input> </el-form-item> </el-form> <div slot="footer"
class="dialog-footer"> <el-button @click="dialogFormVisible = false">取
消</el-button> <el-button type="primary" @click="onSubmit('pwdForm')">确
定</el-button> </div> </el-dialog>
2.在script标签里创建相应方法及数据：
在data里：
return { rules: { password: [ { required: true, message: "请输入原密码", trigger:
"blur" }, { validator: validatePass, message: "原密码不正确", trigger: "blur" }, ],
newPassword: [ { required: true, message: "请输入新密码", trigger: "blur" }, ],
checkPassword: [ { required: true, message: "不能为空", trigger: "blur" }, {
validator: checkpass, trigger: "blur" }, ], }, dialogFormVisible: false, form:
{ password: "", newPassword: "", checkPassword: "", }, };
在handleCommand里：
if (command == "a") { this.dialogFormVisible = true; }
3.添加 submitForm 方法, 提交修改密码表单
onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) {
alert("验证通过"); } else { alert("验证不通过"); return false; } }); },
现在完成：当点击修改密码时，弹出修改密码框，确认时弹出通过不通过。
三、 添加接口
1.添加原密码校验接口 ：
输入原密码，失去焦点后异步发送请求校验是否正确, 给服务接口传入用户id和密码：
// 校验原密码 router.post("/user/pwd", (req, res) => { // console.log(req.body) let
data = req.body User.findOne({ _id: data.id, password: data.pwd }).then((data,
err) => { if (err) { return res.status(500).json({ code: 3000, flag: false,
message: "服务器后台错误" }) } if (!data) { return res.status(200).json({ "code":
4000, "flag": false, "message": "密码不正确" }) } return res.status(200).json({
"code": 2000, "flag": true, "message": "密码正确" }) }) })
四、调用接口
1.新建 api\pwd.js 文件, 调用服务接口实现如下:
import request from "@/utils/request.js" export default { getPass(msg) {
//校验原密码 return request({ url: "/user/pwd", method: "post", data: msg }) }, }
2.引入：
import pwd from "@/api/pwd.js";
3.在data里return上，写自定义校验规则，在失去焦点时，再去检查密码是否正确：
// 校验原密码 let validatePass = (rule, value, callback) => { let userdata =
JSON.parse(localStorage.getItem("sms-user")); userdata.pwd =
this.form.password; pwd.getPass(userdata).then((res) => { if (res.data.flag) {
callback(); } else { callback(new Error(res.data.message)); } }); };
五、检测新密码和确认密码一致性
1.在校验原密码下写：
// 检测新密码和确认密码一致性 let checkpass = (rule, value, callback) => { if (value ==
this.form.newPassword) { callback(); } else { callback(new Error("密码不一致")); } };
六、点击确定时，更新密码。
1. 添加修改密码接口，点击确认, 将用户id和新密码提交给后台接口
// 修改密码（更新密码） router.put("/user/pwd", function(req, res) { let data = req.body
User.findOne({ _id: data.id, }).then((data, err) => { if (err) { return
res.status(500).json({ code: 3000, flag: false, message: "服务器后台错误" }) } if
(!data) { return res.status(200).json({ "code": 4000, "flag": false, "message":
"密码错误" }) } data.password = req.body.pwd //修改密码
User.findByIdAndUpdate(req.body.id, data).then((data, err) => { if (err) {
return res.status(500).json({ code: 3000, flag: false, message: "服务器后台错误" }) }
return res.status(200).json({ "code": 2000, "flag": true, "message": "修改密码成功"
}) }) }) });
2. Api 调用接口：
update(msg) { //校验确认密码和新密码 return request({ url: "/user/pwd", method: "put",
data: msg }) }
3.在方法里：
methods: { handleCommand(command) { if (command == "a") {
this.dialogFormVisible = true; } else if (command == "b") { this.out() } },
out() {//退出登录 logout(localStorage.getItem("sms-token")) .then((res) => { let
resArr = res.data; if (resArr.flag) { // 清除本地数据
localStorage.removeItem("sms-token"); localStorage.removeItem("sms-user");
this.$message({ showClose: true, message: resArr.message, type: "error", });
this.$router.push("/login"); //退出登录，让它回到登录页面 } else { this.$message({
showClose: true, message: resArr.message, type: "error", }); } }) .catch((err)
=> { console.log("err", err); }); }, onSubmit(formName) {
this.$refs[formName].validate((valid) => { if (valid) { alert("验证通过"); let
userdata = JSON.parse(localStorage.getItem("sms-user")); userdata.pwd =
this.form.newPassword; pwd.update(userdata).then((res) => { if (res.data.flag)
{ this.dialogFormVisible = false; this.out(); } }); } else { alert("验证不通过");
return false; } }); }, },
修改密码全部完成。