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