vue表单数据AES加密传输

前端用的是vue框架,后端用的是springboot,话不多说,上来直接撸代码。

一、前端

1. 先安装前端加密JS库

npm install crypto-js

2. 在 src/api 下新建 encryption.js 文件

3. 写上加解密代码

import CryptoJS from 'crypto-js'

var key = CryptoJS.enc.Hex.parse('d86d7bab3d6ac01ad9dc6a897652f2d2')

// 加密
export function encrypt(word) {
  var srcs = CryptoJS.enc.Utf8.parse(word)
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}

// 解密
export function decrypt(word) {
  var decrypt = CryptoJS.AES.decrypt(word, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return CryptoJS.enc.Utf8.stringify(decrypt).toString()
}

4. 在你要进行数据加密传输的页面引入encryption.js 文件

import { encrypt, decrypt } from '@/api/encryption'

5. 为了方便演示,我就直接定义测试数据了

data() {
    return {
      userInfo: {
        id: 10,
        name: '小明'
      }
    }
}

6. 编写调用后端接口的api(在 src/api 下新建 test.js 文件)

import request from '@/utils/request'

export function save(data) {
  return request({
    url: '/api/userInfo/save',
    method: 'post',
    data
  })
}

export default { save }

7. 在你要进行数据加密传输的页面引入test.js 文件

import { save } from '@/api/test'

8. 编写前端测试代码:(我就直接写mounted上测试了)注:加密对象要转成JSON字符串,返回来的数据再转成JSON对象即可

mounted() {
    console.log('加密前对象:')
    console.log(this.userInfo)
    console.log('转json字符串:')
    console.log(JSON.stringify(this.userInfo))
    console.log('加密后:')
    console.log(encrypt(JSON.stringify(this.userInfo)))
    save(encrypt(JSON.stringify(this.userInfo))).then(res => {
      console.log('返回来数据(解密前):')
      console.log(res)
      console.log('返回来数据(解密后):')
      console.log(decrypt(res))
      console.log('转成json对象:')
      console.log(JSON.parse(decrypt(res)))
      console.log(JSON.parse(decrypt(res)).name)
    })
  }

二、后端

后端是用注解来实现加解密的

1. 首先在 pom.xml 文件中引入依赖:

        <dependency>
            <groupId>com.cxytiandi</groupId>
            <artifactId>monkey-api-encrypt-core</artifactId>
            <version>1.2.1.RELEASE</version>
        </dependency>

2. 在application.yml配置文件上加上与前端相同的key

spring:
  encrypt:
    key: d86d7bab3d6ac01ad9dc6a897652f2d2

3. 接着在启动类上加上 @EnableEncrypt 注解

@EnableEncrypt

4. 编写一个 UserInfo 实体类

import lombok.Data;

/**
 * @author zyykin
 * @date 2020/7/28
 */
@Data
public class UserInfo {

    private Integer id;
    private String name;

}

5. 编写一个  UserInfoController ,加上 @Encrypt (加密) 和 @Decrypt (解密)注解:

/**
 * @author zyykin
 * @date 2020/7/28
 */
@RestController
@RequestMapping("/api/userInfo")
public class UserInfoController {

    @Encrypt
    @Decrypt
    @PostMapping(value = "save")
    public UserInfo save(@RequestBody UserInfo userInfo){
        userInfo.setId(20);
        userInfo.setName("小红");
        return userInfo;
    }

}

三、测试

1. 启动前后端项目:

2. 刷新测试的vue页面:(控制台上看到发送到后端的数据已加密)

3. 后端拿到数据已解密并映射到对象中:

4. 再看后端的返回结果:(后端返回的结果也是加密的)

5. 再看看控制台上的打印的信息:

总结:

这只是简单的AES对称加密的demo,只要key不泄漏,别人很难拿到你的数据内容,但是前端的key很不安全,很容易就被搜索得到。

参考资料:

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值