【Vue功能实现】JAVA+VUE前后端RES加解密

java后端+vue前端的一次请求参数对称加密过程，采用了res加密规则

一、后端RES加解密

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.codec.binary.Base64;

/**
 * RES加解密
 */
public class AesUtil {
	// 16位
    // 密盐key,不可泄露
	private final static String SECRET_KEY = "";
    // 字符集
	private final static String ENCODING = "utf-8";

	public static String encode(String text) throws Exception {
		return encode(SECRET_KEY, text);
	}

	public static String decode(String text) throws Exception {
		return decode(SECRET_KEY, text);
	}

	public static String encode(String key, String text) throws Exception {
		byte[] encryptData = {};
		try {
			SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
			Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
			cipher.init(Cipher.ENCRYPT_MODE, keySpec);
			encryptData = cipher.doFinal(text.getBytes(ENCODING));
		} catch (Exception e) {
			System.out.println("aesEncodeErr :调用encode失败! "+e.getMessage());
			throw e;
		}
		return Base64.encodeBase64String(encryptData);
	}

	public static String decode(String key, String text) throws Exception {
		try {
			SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
			Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
			cipher.init(Cipher.DECRYPT_MODE, keySpec);
			byte[] bOut = cipher.doFinal(Base64.decodeBase64(text));
			text = new String(bOut);
		} catch (Exception e) {
			System.out.println("aesDecodeErr :调用decode失败!"+ e.getMessage());
			throw e;
		}
		return text;
	}

    /**
     * 测试方法
     */
	public static void main(String[] args) {
		String text = "加密内容";
		try {
            System.out.printf("加密：%s \n", encode(text));
            System.out.printf("解密：%s \n", decode(encode(text)));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

二、前端RES加密

在vue中使用RES加解密，推荐使用 crypto-js，可以本地引入js文件也可以使用npm命令安装插件

1.引入本地js（crypto-js cdn）

在公共文件下引入本地js，即可在项目下直接使用CryptoJS对象来加解密明文数据，如下面我们在index.html下直接引入cryptoJS.min.js文件：

2.npm方式引入 js

npm install crypto-js --save

完成js插件的安装后，需要再引用一下插件才能调用其方法，如下：

import cryptoJs from 'crypto-js'

 3.关键代码

// 当你采用的是npm方式引入插件，则需要再引用一下该插件
// import cryptoJS from 'crypto-js'

// 加密所需的key
const KEY = '' 

// DES加密
export const encryptDes = (msg) => {
  var keyHex = CryptoJS.enc.Utf8.parse(KEY)
  var option = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
  var encrypted = CryptoJS.AES.encrypt(msg, keyHex, option)
  return encrypted.ciphertext.toString()
}

// DES解密
export const decryptDes = (msg) => {
  var keyHex = CryptoJS.enc.Utf8.parse(KEY)
  var decrypted = CryptoJS.AES.decrypt(
    {
      ciphertext: CryptoJS.enc.Utf8.parse(msg)
    },
    keyHex,
    {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }
  )
  return decrypted.toString(CryptoJS.enc.Utf8)
}

三、关键细节拓扑

上述代码中，我们看到很多如字符集utf8，ECB，PKcs7等等熟悉或陌生的词汇出现，他们分别在加解密过程中担当这什么作用又分别代表什么呢？

这些其实都是前后端必须预先约定好的规则。

1、字符集

首先是字符集，我们必须规定好是统一使用utf8或是hex编码规范。

2、对称加密模式

其次是对称加密模式（既ECB），相较于ECB，其实我们还 CBC/CFB/OFB/CTR四种，各种加密模式不再赘述，可以自行去深入了解。

2、填充补位规则

而最后PKcs7则是五种加密模式中的一类填充规则，在五种加密模式中，除了OFB/CTR不需要做填充补位外，其余三种模式都需要补位，为什么会呢？原因是AES加密方式只能加密 128bit 的分块，他的原来简要来说其实就是对明文简单的按照 128bit 为一个分块进行切割，然后把每个分块分别进行AES加密，最后再将得到的密文进行拼接得到想要的结果，而实际情况下，我们的明文往往可能不是标准的 128bit，当一个分块不足 128bit 时我们就需要对其进行补位，按填充规则填充至 128bit，而填充规则共六种NoPadding、PKCS#5（PKCS5Padding）、PKCS#7（PKCS7Padding）、 ISO 10126、ANSI X9.23 和 ZerosPadding。

以上就是本次前后端AES加密过程的所有分享！