crypto-js对称加密解密的使用方式详解(vue与java端)

 更新时间:2025年01月08日 11:17:28   作者:八月林城  
这篇文章主要介绍了如何在Vue前端和Java后端使用crypto-js库进行AES加密和解密,前端通过创建AES.js文件来实现加密解密功能,并在Vue文件或JavaScript中使用,后端则可以直接使用Java代码进行AES加密和解密操作,需要的朋友可以参考下

一、vue前端

1.1、安装crypto-js

npm install crypto-js

1.2、创建加密解密jsAES.js

import CryptoJS from 'crypto-js'

/**
 * AES加密处理(CBC模式)
 */
export function encryptCBC(word, keyStr, ivStr) {
  // 16位数随机码
  keyStr = keyStr ? keyStr : "Ej7SdjOBvlv2PubN";
  ivStr = ivStr ? ivStr : "Ej7SdjOBvlv2PubN";
  let key = CryptoJS.enc.Utf8.parse(keyStr);
  let iv = CryptoJS.enc.Utf8.parse(ivStr);
  var encryptedData = CryptoJS.AES.encrypt(word, key, 
	  {
	  	iv: iv,
	    mode: CryptoJS.mode.CBC,
	    padding: CryptoJS.pad.Pkcs7
	  }
  );
  return encryptedData.toString();
}
/**
 * AES解密处理(CBC模式)
 */
export function decryptCBC(word, keyStr, ivStr) {
  word = (word + '').replace(/\n*$/g, '').replace(/\n/g, ''); // 这一行,将换行符替换为空

  // 密钥
  keyStr = keyStr ? keyStr : "Ej7SdjOBvlv2PubN";

  // 向量
  ivStr = ivStr ? ivStr : "Ej7SdjOBvlv2PubN";
  var key = CryptoJS.enc.Utf8.parse(keyStr);
  let iv = CryptoJS.enc.Utf8.parse(ivStr);
  var decrypt = CryptoJS.AES.decrypt(word, key, 
	  {
	    iv: iv,
	    mode: CryptoJS.mode.CBC,
	    padding: CryptoJS.pad.Pkcs7
	  }
  )
  return decrypt.toString(CryptoJS.enc.Utf8)
}

1.3、使用(vue文件或者js中)

import { encryptCBC } from '@/js/util/AES'

export function test1(){
	var a1 = encryptCBC("张三");
	console.log('加密后的数据:',a1 )
}

二、java后端的使用方式

import org.bouncycastle.jce.provider.BouncyCastleProvider;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.security.Security;
import java.util.Base64;
public class AESUtil {
    // AES密钥算法
    private static final String KEY_ALGORITHM = "AES";
    // 加密/解密算法/工作模式/填充方式
    private static final String CIPHER_ALGORITHM = "AES/CBC/PKCS5Padding";

    private static final String KEY="Ej7SdjOBvlv2PubN";

    //CBC加密偏移量
    private static final String IVCODE="Ej7SdjOBvlv2PubN";
    
    /**
     * AES加密
     */
    public static String encrypt(String data) {
        try {
            Security.addProvider(new BouncyCastleProvider());
            SecretKeySpec secretKeySpec = new SecretKeySpec(KEY.getBytes(), KEY_ALGORITHM);
            Cipher cipher = Cipher.getInstance(CIPHER_ALGORITHM, "BC");
            IvParameterSpec iv = new IvParameterSpec(IVCODE.getBytes());
            cipher.init(Cipher.ENCRYPT_MODE, secretKeySpec,iv);
            byte[] encryptedBytes = cipher.doFinal(data.getBytes());
            return Base64.getEncoder().encodeToString(encryptedBytes);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
    /**
     * AES解密
     */
    public static String decrypt(String encryptedData) {
        try {
            SecretKeySpec secretKeySpec = new SecretKeySpec(KEY.getBytes(), KEY_ALGORITHM);
            IvParameterSpec iv = new IvParameterSpec(IVCODE.getBytes());
            Security.addProvider(new BouncyCastleProvider());
            byte[] encryptedBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(encryptedData);
            Cipher cipher = Cipher.getInstance(CIPHER_ALGORITHM, "BC");
            cipher.init(Cipher.DECRYPT_MODE, secretKeySpec, iv);
            byte[] decryptedBytes = cipher.doFinal(encryptedBytes);
            return new String(decryptedBytes);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    // 验证
    public static void main(String[] args) throws Exception {
        String data = "张三";
        String encryptedData = encrypt(data); // 加密数据
        String decryptedData = decrypt(encryptedData); // 解密数据
        System.out.println("加密后的数据: " + encryptedData);
        System.out.println("解密后的数据: " + decryptedData);
    }
}

总结 

到此这篇关于crypto-js对称加密解密使用方式(vue与java端)的文章就介绍到这了,更多相关crypto-js对称加密解密使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js实现微信过渡动画左右切换效果

    Vue.js实现微信过渡动画左右切换效果

    这篇文章主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料,需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细,对大家具一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • vue3 + element-plus 的 upload + axios + django 实现文件上传并保存功能

    vue3 + element-plus 的 upload + axios + django 实现文件上

    这篇文章主要介绍了vue3 + element-plus 的 upload + axios + django 文件上传并保存,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能

    Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能

    这篇文章主要介绍了Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能,本通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • vue 1.0 结合animate.css定义动画效果

    vue 1.0 结合animate.css定义动画效果

    本文分步骤给大家介绍了Vue 1.0自定义动画效果,vue1.0代码结合animate.css定义动画,页面一定要引入animate.cdd,具体实例代码大家参考下本文
    2018-07-07
  • Vue 动态路由的实现详情

    Vue 动态路由的实现详情

    这篇文章主要介绍了Vue 动态路由的实现,动态路由是一个常用的功能,根据后台返回的路由json表,前端动态显示可跳转的路由项,本文主要实现的是后台传递路由,前端拿到并生成侧边栏的一个形势,需要的朋友可以参考一下
    2022-06-06
  • 通过Vue实现Excel文件的上传和预览功能

    通过Vue实现Excel文件的上传和预览功能

    在业务系统中,Excel 文件作为一种常用的数据存储和传输格式,经常需要被处理和展示,这篇文章将讲解如何通过 Vue 和 xlsx.js 实现 Excel 文件的上传和预览功能,需要的朋友可以参考下
    2025-04-04
  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    这篇文章主要介绍了Vue中Table组件行内右键菜单实现方法,该项目是基于 vue + AntDesign的,具体实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
    2019-11-11
  • vue清除浏览器全部cookie的问题及解决方法(绝对有效!)

    vue清除浏览器全部cookie的问题及解决方法(绝对有效!)

    最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue3如何获取绑定页面dom元素

    vue3如何获取绑定页面dom元素

    这篇文章主要介绍了vue3如何获取绑定页面dom元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue.js仿hover效果的实现方法示例

    vue.js仿hover效果的实现方法示例

    这篇文章主要介绍了vue.js仿hover效果的实现方法,结合实例形式分析了vue.js事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01

最新评论