Vue前端和Java后端联调使用AES 前后端加密解密

最近在项目中需要针对重要数据进行加密传输，在网上找了一大推加密方式最终采用AES 加密

Java端

package com.zk.web.util;/*** AES 128bit 加密解密工具类* @author dufy*/import org.apache.commons.codec.binary.Base64;import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;public class AesEncryptUtil {//使用AES-128-CBC加密模式，key需要为16位,key和iv可以相同！private static String KEY = "1234567890123456";private static String IV = "1234567890123456";/*** 加密方法* @param data  要加密的数据* @param key 加密key* @param iv 加密iv* @return 加密的结果* @throws Exception*/public static String encrypt(String data, String key, String iv) throws Exception {try {Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");//"算法/模式/补码方式"NoPadding PkcsPaddingint blockSize = cipher.getBlockSize();byte[] dataBytes = data.getBytes();int plaintextLength = dataBytes.length;if (plaintextLength % blockSize != 0) {plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));}byte[] plaintext = new byte[plaintextLength];System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);SecretKeySpec keyspec = new SecretKeySpec(key.getBytes(), "AES");IvParameterSpec ivspec = new IvParameterSpec(iv.getBytes());cipher.init(Cipher.ENCRYPT_MODE, keyspec, ivspec);byte[] encrypted = cipher.doFinal(plaintext);return new Base64().encodeToString(encrypted);} catch (Exception e) {e.printStackTrace();return null;}}/*** 解密方法* @param data 要解密的数据* @param key  解密key* @param iv 解密iv* @return 解密的结果* @throws Exception*/public static String desEncrypt(String data, String key, String iv) throws Exception {try {byte[] encrypted1 = new Base64().decode(data);Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");SecretKeySpec keyspec = new SecretKeySpec(key.getBytes(), "AES");IvParameterSpec ivspec = new IvParameterSpec(iv.getBytes());cipher.init(Cipher.DECRYPT_MODE, keyspec, ivspec);byte[] original = cipher.doFinal(encrypted1);String originalString = new String(original);return originalString;} catch (Exception e) {e.printStackTrace();return null;}}/*** 使用默认的key和iv加密* @param data* @return* @throws Exception*/public static String encrypt(String data) throws Exception {return encrypt(data, KEY, IV);}/*** 使用默认的key和iv解密* @param data* @return* @throws Exception*/public static String desEncrypt(String data) throws Exception {return desEncrypt(data, KEY, IV);}/*** 测试*/public static void main(String args[]) throws Exception {String test1 = "sa";String test =new String(test1.getBytes(),"UTF-8");String data = null;String key =  KEY;String iv = IV;// /g2wzfqvMOeazgtsUVbq1kmJawROa6mcRAzwG1/GeJ4=data = encrypt(test, key, iv);System.out.println("数据："+test);System.out.println("加密："+data);String jiemi =desEncrypt(data, key, iv).trim();System.out.println("解密："+jiemi);}}

可以看到 sa 经过加密 COgQPJgLX+gLJGXkKGznJQ==

前端

npm install crypto-js

写相关js 函数

import CryptoJS from 'crypto-js/crypto-js'// 默认的 KEY 与 iv 如果没有给
const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
const IV = CryptoJS.enc.Utf8.parse('1234567890123456');
/*** AES加密 ：字符串 key iv  返回base64 */
export function Encrypt(word, keyStr, ivStr) {let key = KEYlet iv = IVif (keyStr) {key = CryptoJS.enc.Utf8.parse(keyStr);iv = CryptoJS.enc.Utf8.parse(ivStr);}let srcs = CryptoJS.enc.Utf8.parse(word);var encrypted = CryptoJS.AES.encrypt(srcs, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding});// console.log("-=-=-=-", encrypted.ciphertext)return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);}
/*** AES 解密 ：字符串 key iv  返回base64 **/
export function Decrypt(word, keyStr, ivStr) {let key  = KEYlet iv = IVif (keyStr) {key = CryptoJS.enc.Utf8.parse(keyStr);iv = CryptoJS.enc.Utf8.parse(ivStr);}let base64 = CryptoJS.enc.Base64.parse(word);let src = CryptoJS.enc.Base64.stringify(base64);var decrypt = CryptoJS.AES.decrypt(src, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding});var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);return decryptedStr.toString();
}

在相关模块中引入

import {Decrypt,Encrypt} from '@/plugins/cryptojs'

在vue data()中定义 2个测试变量 d1,d2

在 template插入

<div>原数据： <el-input v-model="d1" placeholder="请输入内容"></el-input><el-button type="primary" @click="jiami" plain>加密</el-button><el-button type="primary" @click="jiemi" plain>解密</el-button>加密数据： <el-input v-model="d2" placeholder="请输入内容"></el-input></div>

在methods 插入函数

//加密
jiami(){console.log("加密-----",this.d1);let dd = Encrypt(this.d1)console.log(dd)this.d2= dd
},//解密
jiemi(){console.log("解密-----",this.d2);this.d1= Decrypt(this.d2)
}/********************加解密结果***********************/
encrypt('sa' , 'AES');
encrypt: COgQPJgLX+gLJGXkKGznJQ==
> "COgQPJgLX+gLJGXkKGznJQ=="

效果

最终完成想要的功能.

Vue前端和Java后端联调使用AES 前后端加密解密相关推荐

angular和JAVA实现aes、rsa加密解密，前后端交互，前端加解密和后端JAVA加解密实现
今天实现了下AES和RSA加密解密,主要的功能是对前后端交互数据进行加密解密,为什么要用到两个算法呢,首先RSA默认的话加密长度是有限的100多个byte吧大约,并且需要公钥私钥,而AES加密没有限制 ...
AES前后端加密解密
AES前后端加密关于AES-来自百度百科后端代码前端代码关于AES-来自百度百科高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称R ...
一个后端程序员如何被公司逼的开始写前端代码！奉劝各位最好选择前后端分离的公司...
hello~各位读者好,我是鸭血粉丝(大家可以称呼我为「阿粉」),在特殊的日子里,大家要注意安全,尽量不要出门,无聊的话,就像阿粉一样,把时间愉快的花在学习上吧. 事情起因阿粉自从学会Java以来, ...
Java精品项目源码前后端分离项目第17期基于遗传算法学校排课系统
Java精品项目源码前后端分离项目第17期基于遗传算法学校排课系统大家好,小辰今天给大家介绍一个基于遗传算法学校排课系统,演示视频文章末尾公众号(小辰哥的java)对号查询观看即可文章目录 Jav ...
Go Nodejs Java Aes 128 ECB加密解密结果保持一致
在多语言的生产环境下,常常是由一种语言进行加密而由另一种语言来进行解密,因此有必要保持各种语言之间加密解密算法的一致性.下面列出了Go,Nodejs,Java 的 Aes-128-Ecb的加密解密算法 ...
商城前后端prd文档/经销商门户/瓶箱回收系统/组织管理平台/系统管理后台/商城文档/司机管理移动端原型/电商前后端原型/电商前后端需求文档//运输公司管理/产品库管理/资金管理/移动端电商原型文档
商城前后端prd文档/经销商门户/瓶箱回收系统/组织管理平台/系统管理后台/商城文档/司机管理移动端原型/电商前后端原型/电商前后端prd文档/后台管理系统原型/运输公司管理/产品库管理/资金管理/移 ...
A19.从零开始前后端react+flask - 删除前后端数据
接上文 A18.从零开始前后端react+flask - 修改前后端数据一找到HomePage.js中 <Icon type="close" title="删除 ...
python aes 加盐加密解密
python aes 加盐加密解密爬虫就是在学习的过程,前几天从某网站的js里学到的加密方式,通过下断点弄清加密原理后,用python复现一下,在这里和大家分享下 #--------引入模块--- ...
vue java 使用AES 前后端加密解密
最近在项目中需要针对重要数据进行加密传输在网上找了一大推加密方式最终采用AES 加密 1.java端 package com.zk.web.util;/*** AES 128bit 加密解密工具类 ...

Vue前端和Java后端联调使用AES 前后端加密解密

Vue前端和Java后端联调使用AES 前后端加密解密

Java端

前端

Vue前端和Java后端联调使用AES 前后端加密解密相关推荐

最新文章

热门文章

Vue前端和Java后端 联调使用AES 前后端加密解密

Vue前端和Java后端 联调使用AES 前后端加密解密

Java端

前端

Vue前端和Java后端 联调使用AES 前后端加密解密相关推荐

最新文章

热门文章

Vue前端和Java后端联调使用AES 前后端加密解密

Vue前端和Java后端联调使用AES 前后端加密解密

Vue前端和Java后端联调使用AES 前后端加密解密相关推荐