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