十、Vue--修改密码

一、需求分析

   当点击修改密码时，弹出修改密码框，向数据库中查询原密码，正确时才允许修改，修改完，点击确定时，更新密码。

二、创建修改密码模板

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;
        }
      });
    },
  },

修改密码全部完成。