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

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

(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)})
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大模型技术的应用场景

大模型技术&#xff08;Large Language Model&#xff0c;LLM&#xff09;是指具有大量参数和训练数据的神经网络模型&#xff0c;它能够学习语言的统计规律&#xff0c;并生成与人类书写的文本相似的文本。大模型技术在近年来取得了重大进展&#xff0c;并开始在各种领域得到应…

OpenAI 推迟了 ChatGPT 的新语音模式

今年 5 月&#xff0c;OpenAI 首次为其人工智能聊天机器人平台ChatGPT演示了一种非常逼真、近乎实时的"高级语音模式"。几个月后&#xff0c;OpenAI 表示需要更多时间。 OpenAI 在其官方 Discord 服务器上发布了一篇文章&#xff0c;称其原计划于 6 月底开始向一小部…

04 Shell编程之正则表达式与文本处理器

1、正则表达式 1.1 正则表达式的定义 正则表达式又称为正规表达式、常规表达式。 正则表达式是使用单个字符来描述、匹配一系列符合某个句法规则的字符串&#xff0c; 简单来说&#xff0c;正则表达式就是一种匹配字符串的方法&#xff08;通过一些特殊符号&#xff0c;实现…

搜狗微信文章数据爬取可视化

搜狗微信文章数据爬取可视化 一、爬取流程1.1 寻找数据接口1.2 发送请求获取数据1.3 xpath表达式解析数据1.4 保存数据二、数据可视化三、完整代码一、爬取流程 搜狗微信的主页:https://weixin.sogou.com/,主页截图如下,在搜索框中输入要查询的内容,以“百合花”为例: 观…

学习记录698@基带传输和频带传输基础

还是在学习计算机网络物理层时遇到这些知识点&#xff0c;这里简单的记录一下&#xff0c;主要都是通信专业的知识 基带传输 信源发出的原始信号叫做基带信号&#xff0c;基带信号分为模拟基带信号与数字基带信号。基带信号一般是低频成分&#xff0c;适合在具有低通特性的有…

203.回溯算法:N皇后(力扣)

class Solution { public:vector<vector<string>> result; // 用于存储所有合法的 N 皇后放置方案// 判断当前位置 (row, col) 是否可以放置皇后bool isValid(int row, int col, vector<string>& chess, int n) {// 检查当前列是否有皇后for (int i 0;…

学好 prompt 让大模型变身撩富婆专家,带你走上人生巅峰

前文 使用大模型的最重要的一步就是编写好的提示词 prompt &#xff0c;但是 prompt 既容易被低估也容易被高估。被低估是因为设计良好的提示词可以显著提升效果。被高估是因为即使是基于提示的应用也需要大量的工程工作才能使其发挥作用。下面我会介绍在编写 prompt 的时候&a…

【面试干货】Java中new与clone操作对象的比较

【面试干货】Java中new与clone操作对象的比较 1、new操作符创建对象的过程2、clone方法创建对象的过程3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、new操作符创建对象的过程 new操作符在Java中用于创建对象&#xff0c;并执行…

一年Java|16K|同程艺龙面经

面经哥只做互联网社招面试经历分享&#xff0c;关注我&#xff0c;每日推送精选面经&#xff0c;面试前&#xff0c;先找面经哥 背景 公司&#xff1a;同程艺龙成都BU,现场部门老大面 之前的同程艺龙电话一面过了&#xff0c;然后通知到同程艺龙成都办公地点现场进行部门老大…

C语言实战 | “贪吃蛇”游戏重构

程序设计的过程中,面对复杂项目,利用模块化思维分解任务,是关键的一步。读者一定要掌握模块化思维设计思维,为将来团队合作、协同完成大型应用软件做好准备。 01、“贪吃蛇”游戏 有了游戏框架之后,按照游戏框架完成“贪吃蛇”游戏。 “贪吃蛇”游戏角色有两个:“贪吃蛇…

设计总监独家揭秘:后台管理系统设计全攻略!

后台管理是反映用户行为、提高产品保留率的有力依据。设计师将后台管理的各种数据创建成清晰、合乎逻辑、可操作的后台管理仪表板。当您设计一个美观实用的UI后台管理时&#xff0c;它会给用户带来更直观的信息内容&#xff0c;从而提高用户体验。因此&#xff0c;后台管理设计…

git 查看本地和远程分支

要查看 Git 仓库中的所有分支&#xff0c;可以使用以下命令&#xff1a; git branch执行该命令后&#xff0c;Git 会列出当前仓库中的所有分支&#xff0c;并在当前所在的分支前加上一个 * 标记。 如果你想查看远程仓库的分支&#xff0c;可以添加 -r 或 --remotes 选项&…

详解LLM大模型是如何理解并使用 tools ?

前文 大家肯定对使用大模型的函数回调或者说 Tools 已经耳熟能详了&#xff0c;那么他们具体内部是如何运作的呢&#xff0c;本文就此事会详细给大家介绍具体的细节。 tools 首先是大家最熟悉的环节&#xff0c;定义两个 tool 的具体实现&#xff0c;其实就是两个函数&#…

C语言:sprintf与snprintf

C语言提供了强大的格式化输出的接口&#xff0c;可以输出到不同的文件或者字符串等&#xff0c;以sprintf和snprintf为例介绍一下 sprintf 格式化输出到字符串 函数签名 int sprintf(char *str, const char *format, ...);与printf相比就是多了前面的char*参数&#xff0c;…

PointNet数据预处理+网络训练

PointNet数据预处理网络训练 数据预处理分类网络的训练分割网络训练分类和分割的结果 数据预处理 数据预处理&#xff0c;这里仅介绍一个shapenetdataset&#xff1b; class ShapeNetDataset(data.Dataset):def __init__(self,root,npoints2500,classificationFalse,class_ch…

前端应熟知的各种宽度高度

目录 一、window对象- 浏览器对象模型 二、Document对象-文档对象模型 前端做项目时经常需要使用到各种宽度高度&#xff0c;可以从两个地方获得这些数据。 一、window对象- 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。 所有浏览…

动态图形设计:创造视觉运动的艺术

什么是动态设计&#xff1f;动态设计是一个设计领域&#xff0c;指在用户界面中使用动态效果的设计。简单地说是为了移动用户界面上的元素而设计的。良好的动态设计可以吸引用户的注意&#xff0c;提高用户体验和满意度。动态设计也是界面设计与动态设计的结合&#xff0c;将设…

无人机螺旋桨理论教学培训课程

本文档为一份详细的关于TYTO机器人公司提供的电机和螺旋桨理论及其实验操作的指南。指南首先概述了材料、实验目标以及实验的介绍部分&#xff0c;随后详细阐述了理论问题、实验步骤和附录内容。实验目的在于通过实际测试来测量和理解不同螺旋桨参数对无人机性能的影响&#xf…

上海亚商投顾:沪指5连阴 工业母机概念逆势走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数今日继续调整&#xff0c;沪指午后一度跌近1%&#xff0c;随后探底回升跌幅收窄&#xff0c;创业板指…

如何确保消息不被重复消费

一、重复消费问题出现的原因 导致重复消费的原因可能出现在生产者&#xff0c;也可能出现在 MQ 或 消费者。这里说的重复消费问题是指同一个数据被执行了两次&#xff0c;不单单指 MQ 中一条消息被消费了两次&#xff0c;也可能是 MQ 中存在两条一模一样的消费。 生产者&…