【场景实现】基于Vue搭建的后台管理系统，如何实现修改密码功能（md5加密）

首先创建一条数据：

看看chrome的控制台，创建时传了哪些参数：

设置的password和confirm_password为123456，这里看到的是已经经过md5加密处理过的数据。

接下来修改这条数据的密码为：123

修改成功，如下图：


下面就看看该功能的核心代码部分：

       <template  slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="resetPassword(scope.row)"
            >修改密码</el-button
          >
        </template>

  <!-- 修改密码模态框 -->
    <el-dialog
      :visible.sync="showDetail"
      :title="'修改密码'"
      width="400px"
      @closed="handlePasswordDialogClosed"
    >
      <render-form
        ref="passwordForm"
        :initForm="passwordForm"
        :formModals="passwordModal"
        :rules="passwordFormRules"
      >
      </render-form>
      <span slot="footer" class="dialog_footer">
        <el-button @click="showDetail = false">取消</el-button>
        <el-button type="primary" @click="handleSavePassword">确定</el-button>
      </span>
    </el-dialog>

js：

<script>
import crypto from 'crypto'

export default {
  data() {
    return {
      passwordForm: {
        password: '',
        confirm_password: ''
      },
      passwordFormRules: {
        password: [{ required: true, message: '请输入密码' }],
        confirm_password: [
          { required: true, validator: this.confirmResetHandle }
        ]
      }。，
      passwordModal: [
        {
          label: '新密码',
          key: 'password',
          inputType: 'password'
        },
        {
          label: '确认密码',
          key: 'confirm_password',
          inputType: 'password'
        }
      ],
      showDetail: false,
    }
  },
  methods: {
    resetPassword(row) {
      this.$set(this, 'passwordForm', {
        id: row.id,
        password: '',
        confirm_password: ''
      })
      this.showDetail = true
    },
    handlePasswordDialogClosed() {
      this.$refs.passwordForm.clearValidate()
    },
    handleSavePassword() {
      this.$refs.passwordForm.validate(() => {
        const md5 = crypto.createHash('md5')
        const pwd = md5
          .update(this.$refs.passwordForm.form.password)
          .digest('hex')
        this.$api.vest
          .editPassword({
            ...this.$refs.passwordForm.form,
            password: pwd,
            confirm_password: pwd
          })
          .then(() => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.showDetail = false
            this.$refs.vestGrid.fetchHandler()
          })
      })
    },
    // 两次密码校验
    confirmResetHandle(rule, value, callback) {
      if (value == '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.$refs.passwordForm.form.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
  }
}
</script>

关于crypto

crypto模块的目的是为了提供通用的加密和哈希算法。用纯JavaScript代码实现这些功能不是不可能，但速度会非常慢。Nodejs用C/C++实现这些算法后，通过cypto这个模块暴露为JavaScript接口，这样用起来方便，运行速度也快。

md5是一种常用的哈希算法，用于给任意数据一个“签名”。这个签名通常用一个十六进制的字符串表示。

 const md5 = crypto.createHash('md5')
        const pwd = md5
          .update(this.$refs.passwordForm.form.password)
          .digest('hex')

update()方法默认字符串编码为UTF-8，也可以传入Buffer。

如果要计算SHA1，只需要把'md5'改成'sha1'，就可以得到SHA1的结果1f32b9c9932c02227819a4151feed43e131aca40。

还可以使用更安全的sha256和sha512。