第二十五课 编写后台管理修改密码

一、编写验证旧密码后台接口

server-api/mocks/userpwd.js

/**
 * 后台登录接口
 *
 * @url user/pwd
 *
 */
 
 module.exports = function (req) {
    return {
      code: 200,
      flag:true,
      message:"旧密码正确",
    }
  };

二、编写封装请求地址api

src/api/password.js

import myaxios from '@/utils/myaxios'

export default{
    checkPwd(userId,oldPassword){
        return myaxios({
            url:"/user/pwd",
            method:"post",
            data:{
                userId,
                oldPassword
            }
        })
    },
    updaePwd(userId,newPassword){
        return myaxios({
            url:"/user/pwd",
            method:"post",
            data:{
                userId,
                newPassword
            }
        })
    }
}

三、src/components/AppHeeader/index.vue编写布局

 <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" :rules="rules">
        <el-form-item label="旧密码" prop="oldpass">
            <el-input type="password" v-model="ruleForm.oldpass"></el-input>
        </el-form-item>
         <el-form-item label="新密码" prop="newpass">
            <el-input type="password" v-model="ruleForm.newpass"></el-input>
        </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass"></el-input>
        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
           <el-button  @click="resetForm('ruleForm')">重置</el-button>
         </el-form-item>
      </el-form>
    </el-dialog>

四、表单校验

data() {
    const validateoldPass =(rule,value,callback)=>{
      passwordApi.checkPwd(this.userData.id,value).then(response=>{
        const resp = response.data;
        if(resp.flag){
          callback()
        }else{
          callback(new Error(resp.message))
        }
      })
    }
    const validateCheckPass =(rule,value,callback)=>{
        if(value!==this.ruleForm.newpass){
           callback(new Error('两次密码输入不一致'))
        }else{
          callback()
        }
    }
    return {
      rules:{
          oldpass:[{
            required:true,message:'旧密码不能为空',trigger:'blur'
          },{
            validator:validateoldPass,trigger:'blur'
          }],
           newpass:[{
            required:true,message:'新密码不能为空',trigger:'blur'
          }],
          checkPass:[{
            required:true,message:'确认密码不能为空',trigger:'blur'
          },{
            validator:validateCheckPass,trigger:'blur'
          }]
      },
      userData: [],
      dialogFormVisible:false,
      ruleForm:{
        oldpass:'',
        newpass:'',
        checkPass:"",
      }
    };
  },

五、退出的方法提出来放在函数里

logoutSystem(){
          const token = localStorage.getItem("manager-token");
          logout().then((response) => {
            const resp = response.data;
            if (resp) {
              localStorage.removeItem("manager-user");
              localStorage.removeItem("manager-token");
              this.$router.push("/login");
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
                duration: 1000,
              });
            }
          });
          this.$message("退出登录");
    },

六、重置表单

resetForm(formName){
      this.$refs[formName].resetFields();
    },

七、修改密码

submitForm(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          passwordApi.updaePwd(this.userData.id,this.ruleForm.newpass).then(response=>{
            const resp = response.data
            this.$message({
              message:resp.message,
              type:resp.flag ? "success" : "warning"
            })
            if(resp.flag){
              this.logoutSystem();
              this.dialogFormVisible = false
            }
          })
        }else{
          
        }
      })
    },

八、抽取后handleCommand的函数

 handleCommand(command) {
      switch (command) {
        case "EditPassword":
          // this.$message("修改密码");
          this.updatePwd()
          break;
        case "exit":
          this.logoutSystem();
          break;
            default:
          break;
      }
    },
    
     updatePwd(){
      this.dialogFormVisible = true
      this.$nextTick(()=>{
        this.$refs["ruleForm"].resetFilelds();
      })
    }