首页 > 其他分享 >vue+spirngboot前后端数据加解密(基于AES+RSA实现)

vue+spirngboot前后端数据加解密(基于AES+RSA实现)

时间:2023-12-08 17:44:06浏览次数:27  
标签:AES vue 加密 aeskey 加解密 解密 公钥 前台

案例说明

案例只针对post请求

这里使用’Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’;为键值对的形式(非json)

AES加密数据,RAS加密AES的key

实现思路

前台首先请求非加密接口获取后台的公钥
前台在请求前生成自己的公钥和私钥,以及AES对称加密的key
使用前台生成的aeskey对数据进行加密
在请求前使用后台的公钥对前台的aeskey进行加密
将前台加密的data、aeskey和前台公钥一起传递给后台
后台使用私钥对前台的aeskey进行解密,再用这个aeskey去解密data
后台如果需要返回数据,这时使用后台生成的aeskey对数据进行加密
后端使用前台的公钥对aeskey进行加密
将aeskey和加密后的数据一起返还给前台,由前台使用私钥解密获得后端的aeskey
再使用后端的aeskey解密数据
通过这种方式,前后端交互的数据在传输过程中都经过了加密和解密的过程,保证了数据的安全性。

后台(Springboot)
在实际开发中,我们不应该在每一个接口都单独调用加密解密方法,这样太臃肿了。我们应该将重复代码进行抽离(事不过三,三则重构),这里我们可以使用AOP(切面)来进行处理。比如,我们可以定义一个切面类来统一处理加密解密的逻辑,然后在需要加密解密的方法上面声明该切面类,即可自动在方法执行前后执行加密解密的逻辑,避免了重复的代码。

仓库代码地址

 

标签:AES,vue,加密,aeskey,加解密,解密,公钥,前台
From: https://www.cnblogs.com/privateLogs/p/17888711.html

相关文章

  • vue实现全局消息提醒功能(vue-extend)
    1.需求背景(1)在一般的管理系统或者H5应用中,需要交互反馈提醒。这种交互反馈,往往需要在多个组件中使用到,那么是否可以将其抽离出来,封装一个组件呢?答案是肯定的,可以根据日常的业务,对消息提醒功能进行封装,那么问题来了,如何实现一次注册,多次使用呢,关键时刻,vue.extendAPI就派上用场......
  • Vue之this.$options.data()和this.$data
    Vue之this.$options.data()和this.$data:https://blog.csdn.net/weixin_44090040/article/details/129875428?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-1-129875428-blog-132714630.235^v39^pc_relevant_3m_sort_dl_base2&spm......
  • 在vue3中使用openlayers3实现track轨迹动画
    网上太多资料代码,抄来抄去,而且版本也是OL2的,部分API已经弃用基础知识不多说,直接讲重点三个关键变量//记录开始动画的时间conststartTime=ref(0);//轨迹分割的颗粒度,数值越小分的越细constparticle=20;//轨迹动画的速度,数值越大位移越快constspeed=10;根......
  • vue实现大文件分片上传 vue-simple-uploader
    首先为什么要分片上传?大部分小白使用element-ui中上传组件,但是直接用它上传大文件会超时或者RequestEntityTooLarge(请求实体太大)这种问题。1.使用插件vue-simple-uploader我的这个可以自定义样式(没懂的留言给我)1.1customUploader封装组件上代码:<template><divid="......
  • vue2、vue3适配大屏。分辨率变化,样式不变
    一、vue3适配大屏的,创建一个叫useDraw.jsexportdefaultfunction(){constscale={width:'1',height:'1',}constbaseWidth=1920constbaseHeight=1080constbaseProportion=parseFloat((baseWidth/baseHeight).toFixed(5......
  • vue3组件通信
    子传父$emit在vue框架中事件分为两种:一种是原生的DOM事件,另外一种自定义事件。原生DOM事件可以让用户与网页进行交互,比如click、change、mouseenter、mouseleave...自定义事件可以实现子组件给父组件传递数据。vue2中的@click绑定的是自定义事件,可以通过.native修饰符变为原生DOM......
  • Vue路由params、query传参用法,以及form表单回车自动提交问题
    一、路由参数用法1.1query参数第一种方式传参:跳转路由并携带query参数,注意to的字符串写法将id和title拼接字符串形成地址<router-link:to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>&nbsp;&nbsp;第二种方式传参:to......
  • 基于vue脚手架的练习2
    <template><div><span>父值为:</span>{{to_value}}<button@click="clear()">清空</button></div></template><script>exportdefault{props:['to_value'],methods......
  • vue实现下载附件功能
    两种方式下载:第一种:直接a标签下载<aclass="item-btndownload":href="'/xxx/xxx/download?id='+xxx.id":download="xxx.name">下载附件</a>第二种: <el-buttonclass="item-btndownload"@click="downloadEnc......
  • Vue学习计划-Vue2--Vue核心(五)条件、列表渲染、表单数据
    1.条件渲染v-ifv-if="表达式"v-else-if="表达式"v-else="表达式"适用于:切换频率较低的场景特点:不显示dom元素,直接被删除注意:v-if和v-else-if、v-else一起使用,但要求结构不能被打断v-if和template一起使用,v-show不可以v-showv-show="表达式"适用于:切换频......