一、需求

• 前端实现重置密码功能
• 接口传参时需要对密码进行RSA加密
• 需要对确认密码输入框进行密码是否一致校验

二、技术栈

• 前端框架：vue2
• 前端UI框架：Ant Design of Vue（v1.7.8）
• RSA加密：JSEncrypt

三、RSA加解密

安装依赖

• npm i --save jsencrypt

• yarn add jsencrypt --save

• 我这里使用的版本号是：3.2.1

创建加解密js文件

• 在工具类 utils 文件夹下新增 rsaEncrypt.js 文件

import {
    
     JSEncrypt } from 'jsencrypt'

// 密钥对生成在线网址 http://web.chacuo.net/netrsakeypair

// 加密公钥
// 公钥获取一般有两种方式: 1、找后端要密钥生成的接口; 2、让后端直接给你一个公钥字符串
const publicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArkdFwy+UQmGwm8ksDV2EE9w59KWLkDbNVLFEUgB2IHQx8FgzfC1XV8QXSp136S3kr5QnbXgCWEsRRvyVUvPAfnZilO2S7w8AFyteX+gkWYTu0n6jueEVGZpKPdU1TdJDxDp5S5HjMxSZD4v7YYBBzn0iFGjP6ys2S5SgJRVP5uT71VYm1fy9N/jhjjrluabv0g+0afoodwNo+xRjXT1xtQ8idZseYHfvGXs3MyjLrdUKR2ps7c3ZSSNNy7obc3lO8lFMGEqAtGCXAFfcG+wu0dA5egz4l3NULHkhBFsJRCkNIZpsM57l5kxFt5+tormoid8qT0l7ifoIXJipY4Z09QIDAQAB'

// 解密私钥
const privateKey = 'MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCuR0XDL5RCYbCbySwNXYQT3Dn0pYuQNs1UsURSAHYgdDHwWDN8LVdXxBdKnXfpLeSvlCdteAJYSxFG/JVS88B+dmKU7ZLvDwAXK15f6CRZhO7SfqO54RUZmko91TVN0kPEOnlLkeMzFJkPi/thgEHOfSIUaM/rKzZLlKAlFU/m5PvVVibV/L03+OGOOuW5pu/SD7Rp+ih3A2j7FGNdPXG1DyJ1mx5gd+8ZezczKMut1QpHamztzdlJI03LuhtzeU7yUUwYSoC0YJcAV9wb7C7R0Dl6DPiXc1QseSEEWwlEKQ0hmmwznuXmTEW3n62iuaiJ3ypPSXuJ+ghcmKljhnT1AgMBAAECggEAddt9MiJbAQlPhgrl36P+TfAAwZGycDSfZ0b6DPqC6C+sFf2P08pV5uSVW8Bh9y8yGAr5Hu6pp0wcwwTNduugoeUthcmkNEbQqNqLWBCFhISBfZhm4K12t3m/+1DUW2x2p51jqdde7oxfdkQUHDvARQQap/K5qS/v5+z64Bkpj9rs+GzAUTaP7ErPhVf9DX8rGwb9m8fgUy1ekvkXXL1rGH1DXLlKb9xKikYnUoyzfEt3QMkgYTPAMS0+RE+lm35SJHF8ulBYNOxqEpJKkWP92DUu8frdQBDLspHyo38ZkQwUM8FII3mAq4FWh5lMAGnyvlKVuEKE/8eJvDNIgjSZgQKBgQDdBiWOybzIj9C7Cn2MmQY4x5BfPnB2of/c73m2LXjlaIlIZ95gn7Z0st61FWGyT59VjWek/M/1Y2eINnpYQW4aw/ZoAGRVE6sJxF17IzwiZz/wybKB6jXuJ+OCn//e8uzmzqZzZNqsBjMi1HPdDOX0QE6rjOo+kKRCSs/d8LRwvwKBgQDJ22zklRURGvir377QIZLlGV1deMSuKfXO+UbOUJgjPueBCUiER8Jy/2hlLKMGaQgOzXKGYosgpU8hFk2eEJkOQ395wbHmaiebhcLjiMdQii7zSGhZ0pE6ZycyhlhTj61BQMm/VYJ+Tl4mbMAren1fLvQ8wd0yBiJmyLIjUTTSwKBgQC0pEBv+iukE/550DIahjrSjzBM16BdJTwUG1lzbqi/fnetSM80U3Rw3nwsrgQCExdbec26x7FDknHcnwHRPfC6SW0LRT67Ve7VdbsdWAfe6loU9xRBH+Xh9pH4gcJDOnIqlbzu1P/v1sVWcyMbCF6tCR4DEZGlftvxHmnTr9YZywKBgDTPfYvIHTzea5S78vYM8puRqUWdJQfT3oK6kNQwhNcxy1qqBvUEubQcdHzjpFrXEoOEOixnxiii+Vxd2+FOUUBbVPfKi5GI9/6LGuhhBXrQJkwL/PJ3TYz9+YVjsoQsrmc5qnt26B2v4INW4ugYmA8r1Q9zpc290/2cYttJampFAoGAA5PP6Rw1INjIr5QDccmL+ffV05tS5JhbL4L3ZVmvLnoorWxc8kN5M5FS9gqTI5vZ5jMHUghJ7iNoPzvTGUNZTsu9HZcy8f9d7NuYuaTUXnHwE7BBiablBFlPCLAT/DR9hQ6bThu0gA3okCGN/E/l15XU0GH2KH2Joof9Pl8qRyk='

// 加密
export function encrypt (param) {
    
    
    const encryptor = new JSEncrypt() // 创建jsencrypt加密对象
    encryptor.setPublicKey(publicKey) // 设置公钥
    return encryptor.encrypt(param) // 对需要加密的数据进行加密
}

// 解密
export function decrypt (msg) {
    
    
    const decrypt = new JSEncrypt()
    decrypt.setPrivateKey(privateKey)
    return decrypt.decrypt(msg)
}

四、确认密码校验

// 自定义校验规则
validatePass2(rule, value, callback) {
    
    
	if (value === '') {
    
    
		callback(new Error('确认密码不能为空'));
	} else if (value !== this.ruleForm.password) {
    
    
		callback(new Error('两次输入的密码不一致！'));
	} else {
    
    
		callback();
	}
},

五、完整代码

<template>
  <a-modal title="重置密码" :visible="visible" ok-text="确认" cancel-text="取消" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
      <a-form-model-item has-feedback label="新密码" prop="password">
        <a-input-password v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入新密码"/>
      </a-form-model-item>
      <a-form-model-item has-feedback label="确认密码" prop="checkPass">
        <a-input-password v-model="ruleForm.checkPass" type="password" autocomplete="off" placeholder="请重新输入新密码"/>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
// 引入加密方法
import {
    
     encrypt } from '@/utils/rsaEncrypt';
// 引入接口请求方法
import {
    
     updatePasWord } from '@/api/system'
export default {
    
    
  data() {
    
    
    return {
    
    
      visible: false,
      ruleForm: {
    
    
        password: '',
        checkPass: '',
      },
      layout: {
    
    
        labelCol: {
    
     span: 4 },
        wrapperCol: {
    
     span: 20 },
      },
      rules: {
    
    
        password: [{
    
     required: true, message: '新密码不能为空', trigger: 'blur' }],
        checkPass: [{
    
     required: true, validator: this.validatePass2, trigger: 'change' }],
      },
    };
  },
  methods: {
    
    
    handleOk() {
    
    
      this.$refs.ruleForm.validate((valid) => {
    
    
        if (valid) {
    
    
          const params = {
    
    
            // 加密
            oriPassWord: encrypt(this.ruleForm.password),
            newPassWord: encrypt(this.ruleForm.checkPass),
          };
          // 接口请求
          updatePasWord(params).then((res) => {
    
    })
        } else {
    
    
          return false;
        }
      });
    },
    handleCancel() {
    
    
      this.$refs.ruleForm.resetFields();
      this.visible = false;
    },
    // 自定义校验规则
    validatePass2(rule, value, callback) {
    
    
      if (value === '') {
    
    
        callback(new Error('确认密码不能为空'));
      } else if (value !== this.ruleForm.password) {
    
    
        callback(new Error('两次输入的密码不一致！'));
      } else {
    
    
        callback();
      }
    },
  },
};
</script>

<style></style>

六、效果

接口传参如下，可以看到密码已经被加密