crypto-js對稱加密解密的使用方式詳解(vue與java端)
一、vue前端
1.1、安裝crypto-js
npm install crypto-js
1.2、創(chuàng)建加密解密jsAES.js
import CryptoJS from 'crypto-js'
/**
* AES加密處理(CBC模式)
*/
export function encryptCBC(word, keyStr, ivStr) {
// 16位數(shù)隨機碼
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('加密后的數(shù)據(jù):',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); // 加密數(shù)據(jù)
String decryptedData = decrypt(encryptedData); // 解密數(shù)據(jù)
System.out.println("加密后的數(shù)據(jù): " + encryptedData);
System.out.println("解密后的數(shù)據(jù): " + decryptedData);
}
}總結(jié)
到此這篇關(guān)于crypto-js對稱加密解密使用方式(vue與java端)的文章就介紹到這了,更多相關(guān)crypto-js對稱加密解密使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項目index.html中使用環(huán)境變量的代碼示例
在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關(guān)于vue項目index.html中使用環(huán)境變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03
vue如何解決sass-loader的版本過高導(dǎo)致的編譯錯誤
這篇文章主要介紹了vue如何解決sass-loader的版本過高導(dǎo)致的編譯錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
在vue3中使用el-tree-select實現(xiàn)樹形下拉選擇器效果
el-tree-select是一個含有下拉菜單的樹形選擇器,結(jié)合了?el-tree?和?el-select?兩個組件的功能,這篇文章主要介紹了在vue3中使用el-tree-select做一個樹形下拉選擇器,需要的朋友可以參考下2024-03-03

