vue3+crypto-js插件实现对密码加密后传给后端

news2024/10/7 5:55:38

最近在做项目的过程中又遇到了一个新的问题，在实现后端管理系统的个人信息页面中，涉及到修改密码的功能，刚开始我直接通过传参的方式将修改的密码传入给后端，可是后端说需要将原密码、新密码以及确认密码都进行加密处理，害这下好了，这咋搞啊。自己之前没涉及过这个啊，话虽如此但这页面毕竟是咱做的啊，总不能说摆手不做放置不管嘛。方法总比困哪多这也难不倒我，于是乎上网查呀查，搜集了很多的资料，终于功夫不负有心人，嘿解决了。这等好事岂能我一人知道，不得分享给大家啊，好了现在咱们就一起共享吧！

（1）搭建修改密码框架

在开始之初呢先是搭建修改密码这一板块的框架，以下是为演示方便做的参考：

<template>
    <!-- 修改密码 -->
    <div class="edit-password">
      <div class="edit-title">
        <p class="title">修改密码</p>
      </div>
      <div class="edit-conten">
        <a-form ref="formRef" :model="formPaw" :rules="rules">
          <a-form-item label="原密码" ref="old_pwd" name="old_pwd" style="margin-left: 13px">
            <a-input
              v-model:value="formPaw.old_pwd"
              size="small"
              placeholder="请输入原密码"
              style="width: 360px; height: 30px"
            ></a-input>
          </a-form-item>
          <a-form-item label="新密码" ref="new_pwd" name="new_pwd" style="margin-left: 13px">
            <a-input
              v-model:value="formPaw.new_pwd"
              size="small"
              placeholder="请输入8到20位的字母加数字"
              style="width: 360px; height: 30px"
            ></a-input>
          </a-form-item>
          <a-form-item label="确认密码" ref="confirm_paw" name="confirm_paw">
            <a-input
              v-model:value="formPaw.confirm_paw"
              size="small"
              placeholder="请输入8到20位的字母加数字"
              style="width: 360px; height: 30px"
            ></a-input>
          </a-form-item>
        </a-form>
        <div class="submit-btn">
          <a-button class="cancel-btn" @click="selectClose">取 消</a-button>
          <a-button class="ok-btn" @click="selectTypeOk">保存</a-button>
        </div>
      </div>
    </div>
    <!-- 子账号 -->
    <!-- <ul class="content-list" v-if="showChildAccound">
        <li class="list-li">
          <div class="profile"></div>
          <div class="account">
            <span class="account-txt">账号类型</span>
            <span class="txt">{{ accountChildType }}</span>
          </div>
        </li>
        <li class="list-li">
          <div class="profile"></div>
          <div class="account">
            <span class="account-txt">账号信息</span>
            <div class="account-info">
              <span class="txt">{{ accountChInfo }}</span>
              <a-button type="primary" ghost style="width: 80px; height: 30px" size="small" @click="editChildPaw"
                >修改密码</a-button
              >
            </div>
          </div>
        </li>
        <li class="list-li">
          <div class="profile"></div>
          <div class="account">
            <span class="account-txt">主账号信息</span>
            <span class="txt">{{ accountinfo }}</span>
          </div>
        </li>
        <li class="list-li">
          <div class="profile"></div>
          <div class="account">
            <span class="account-txt">KEY</span>
            <div class="account-info">
              <span class="txt">{{ accountKey }}</span>
              <a-button type="primary" ghost style="width: 80px; height: 30px" size="small" @click="copyInfo"
                >复制</a-button
              >
            </div>
          </div>
        </li>
      </ul> -->
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { AESUtil } from '@/utils/AESUtil'
// 输入密码信息
const formPaw = ref({
  old_pwd: '',
  new_pwd: '',
  confirm_paw: ''
})
// 子账号信息
const switchAccount = ref([])
// 修改密码确定
const selectTypeOk = async () => {}
// 修改密码取消
const selectClose = () => {}
// 判断输入的密码是否一致
const equalToPassword = (rule, value, callback) => {
  if (formPaw.value.new_pwd !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}
// 密码规则校验
const rules = ref({
  old_pwd: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  new_pwd: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    {
      pattern:
        '^(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*,./:;\\"\'\`~|*--+/\\\\.])[\\da-zA-Z!@#$%^&*,./:;\\"\'\`~|*--+/\\\\.]{8,20}$',
      message: '密码由8-20位至少包含一个大小写字母、数字、特殊符号组成',
      trigger: 'blur'
    }
  ],
  confirm_paw: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    { required: true, validator: equalToPassword, trigger: 'blur' }
  ]
})
onMounted(() => {})
</script>

（2）下载crypto-js插件

使用npm进行安装crypto-js

npm install crypto-js --save

（3）使用crypto-js插件

在下载完之后其实我们的项目里已经存在crypto-js插件了，如果不知道有没有安装成功可以在项目的package.json文件中进行查看。那么如何使用这个组件呢，这个还需要你再在utils文件夹下重新建一个名为AESUtil.js的文件。然后在这个文件里面使用此组件，具体方法如下：

import CryptoJS from 'crypto-js'

// 秘钥，必须由16位字符组成
// const secretKey = 'j78Rd5fEi9fr4$dY'
export const AESUtil = {
  /**
   * AES加密方法
   * @param content 要加密的字符串
   * @returns {string} 加密结果
   */
  aesEncrypt: (content, seckey ) => {
    const key = CryptoJS.enc.Utf8.parse(seckey)
    const srcs = CryptoJS.enc.Utf8.parse(content)
    const encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return encrypted.toString()
  },

  /**
   * 解密方法
   * @param encryptStr 密文
   * @returns {string} 明文
   */
  aesDecrypt: (encryptStr, seckey) => {
    const key = CryptoJS.enc.Utf8.parse(seckey)
    const decrypt = CryptoJS.AES.decrypt(encryptStr, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return CryptoJS.enc.Utf8.stringify(decrypt).toString()
  }
}

（4）引用AESUtil.js文件

结束完上述操作后，需要做的是如何在自己写的代码中使用到这个方法，首先是在上述代码中的<script>中引入AESUtil.js文件

import { AESUtil } from '@/utils/AESUtil'

然后再次确认密码的事件中进行使用

// 修改密码确定
const selectTypeOk = async () => {
  try {
    await formRef.value.validateFields()
  } catch (errorInfo) {
    return console.log('请完整输入')
  }
//这里是使用方式---本片文章最重要的地方
  const passwordEntity = {
    old_pwd: AESUtil.aesEncrypt(formPaw.value.old_pwd, 'DZ2Ri1rVRhWEALBx'),
    new_pwd: AESUtil.aesEncrypt(formPaw.value.new_pwd, 'DZ2Ri1rVRhWEALBx'),
    confirm_paw: AESUtil.aesEncrypt(formPaw.value.confirm_paw, 'DZ2Ri1rVRhWEALBx')
  }
  console.log(formPaw.value.old_pwd, 'formPaw.old_pwdformPaw.old_pwdformPaw.old_pwd')
  updAccountPwd(passwordEntity)
    .then(res => {
      if (res.code === 200 && res.data) {
        message.success('修改成功')
      } else {
        message.error('修改失败')
      }
    })
    .catch(error => {
      console.log(error)
    })
}

以上代码中的接口使用的是封装后的方式，可自行按照自己的进行修改即可