欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue表单数据AES加密传输

程序员文章站 2022-06-15 23:42:03
前端用的是vue框架,后端用的是springboot,话不多说,上来直接撸代码。一、前端1. 先安装前端加密JS库npm install crypto-js2. 在 src/api 下新建 encryption.js文件3.写上加解密代码import CryptoJS from 'crypto-js'var key = CryptoJS.enc.Hex.parse('d86d7bab3d6ac01ad9dc6a897652f2d2')// 加密export fu.....

 

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

一、前端

1. 先安装前端加密JS库

npm install crypto-js

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

vue表单数据AES加密传输

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页面:(控制台上看到发送到后端的数据已加密)

vue表单数据AES加密传输

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

vue表单数据AES加密传输

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

vue表单数据AES加密传输

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

vue表单数据AES加密传输

总结:

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

参考资料:

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