重置密码

页面布局和路由

在 router/index.js 中，加入一条路由规则：

const routes = [
  // 最大级别的规则，对应的组件，会显示在 App.vue 中
  // 登录
  { path: '/login', component: () => import('@/views/Login.vue') },
  // 注册
  { path: '/reg', component: () => import('@/views/Reg.vue') },
  // 后台主页
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    children: [
      { path: 'home', component: () => import('@/views/Chart.vue') },
      { path: 'user-info', component: () => import('@/views/user/UserInfo.vue') },
+     { path: 'user-pwd', component: () => import('@/views/user/RePwd.vue') }
    ]
  }
]

复制页面并修改

复制 UserInfo.vue 中，全部的代码，到 RePwd.vue 中。
去掉所有和数据相关的代码：

• 去掉 的 :model 和 :rules 属性
• 去掉 的 prop 属性
• 去掉 的 v-model 属性
• 去掉 第一个 中的 disabled 属性
• 去掉两个按钮的 @click 事件

JS代码，清空。
文字（重置密码、原密码、新密码、确认密码），自行修改。

表单验证

验证的内容包括：

• 三个框，都需要 必填验证、长度验证
• 新密码，不能和原密码一致
• 两个新密码，必须一致

设置数据项和验证规则对象：

export default {
  data() {
    // 自定义的规则
    return {
      // 数据项
      pass: {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      },
      // 验证规则对象
      rules: {
        old_pwd: [
          { required: true, message: '原密码必填', trigger: 'blur' },
          { min: 6, max: 15, message: '长度必须是6~15位', trigger: 'blur' }
        ],
        new_pwd: [
          { required: true, message: '新密码必填', trigger: 'blur' },
          { min: 6, max: 15, message: '长度必须是6~15位', trigger: 'blur' }
        ],
        re_pwd: [
          { required: true, message: '确认密码必填', trigger: 'blur' },
          { min: 6, max: 15, message: '长度必须是6~15位', trigger: 'blur' }
        ]
      }
    }
  }
}

表单中，对应的数据绑定好：

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>重置密码</span>
    </div>
    <!-- 内容区放表单 -->
    <el-form ref="form" label-width="90px" :model="pass" :rules="rules">
      <!-- 表单中的每一行，叫做 el-form-item -->
      <el-form-item label="原密码" prop="old_pwd">
        <el-input v-model="pass.old_pwd"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input v-model="pass.new_pwd"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="re_pwd">
        <el-input v-model="pass.re_pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确认修改</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

自定义验证规则，验证新密码和原密码不能一致、验证两次新密码必须一致：

export default {
  data() {
    // 自定义的规则
    const newPwd = (rule, value, callback) => {
      // 新密码输入框使用了这个规则，所以value 表示输入的新密码
      if (value === this.pass.old_pwd) {
        callback(new Error('新密码不能和原密码相同'))
      } else {
        callback()
      }
    }
    const rePwd = (rule, value, callback) => {
      // 确认密码使用了这个规则，所以 value 表示输入框的确认密码
      if (value === this.pass.new_pwd) {
        callback()
      } else {
        callback(new Error('两次新密码不一致'))
      }
    }


    return {
      .....................................
    }
  }
}

验证新密码和确认密码的时候，使用自定义的规则即可：

rules: {
  old_pwd: [
    { required: true, message: '原密码必填', trigger: 'blur' },
    { min: 6, max: 15, message: '长度必须是6~15位', trigger: 'blur' }
  ],
  new_pwd: [
    { required: true, message: '新密码必填', trigger: 'blur' },
    { min: 6, max: 15, message: '长度必须是6~15位', trigger: 'blur' },
+   { validator: newPwd, trigger: 'blur' }
  ],
  re_pwd: [
    { required: true, message: '确认密码必填', trigger: 'blur' },
    { min: 6, max: 15, message: '长度必须是6~15位', trigger: 'blur' },
+   { validator: rePwd, trigger: 'blur' }
  ]
}

提交数据，完成修改

封装API方法（只要发送ajax请求，都要封装API方法）
api/user.js，增加如下方法：

// 重置密码
export const updatePwdAPI = data => {
  // return request.put('/my/userinfo', 请求体)
  return request.patch('/my/updatepwd', data)
}

组件中，给 确认修改，添加单击事件

<el-button type="primary" @click="updatePwd">确认修改</el-button>

JS中，导入 API方法

import { updatePwdAPI } from '@/api/user'

完成methods方法：

updatePwd() {
  this.$refs.form.validate(async valid => {
    if (!valid) return
    // 验证通过，提交数据
    const { data: res } = await updatePwdAPI(this.pass)
    // 处理响应结果
    if (res.code === 0) {
      this.$message.success(res.message)
      // this.$refs.form.resetFields() // 重置表单
      // -------------------- 业务逻辑场景二：重置了密码，退出，重新登录 ------------------------
      // 重置vuex中的 token、user，然后跳转到登录 （和退出一样）
      this.$store.commit('user/updateToken', '')
      this.$store.commit('user/updateUser', {})
      this.$router.push('/login')
    } else {
      this.$message.error(res.message)
    }
  })
}