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. 接着在启动类上加上 @EnableEncrypt 注解

@EnableEncrypt

3. 编写一个 UserInfo 实体类

import lombok.Data;

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

    private Integer id;
    private String name;

}

4. 编写一个  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很不安全，很容易就被搜索得到。

参考资料：

• 前后端API交互如何保证数据安全性？

• monkey-api-encrypt

本文地址：https://blog.csdn.net/zyydfhlw/article/details/107642712