vue java 使用AES 前后端加密解密
生活随笔
收集整理的這篇文章主要介紹了
vue java 使用AES 前后端加密解密
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近在項目中需要針對重要數據進行加密傳輸
在網上找了一大推加密方式 最終采用AES 加密
1、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==
?2、前端
?vue? 引入
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)},?
效果
?
?
最終 完成 想要的功能.
?
轉載于:https://www.cnblogs.com/yucm/p/9124655.html
總結
以上是生活随笔為你收集整理的vue java 使用AES 前后端加密解密的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java基础23-集合类2(Set接口,
- 下一篇: DOM中Event 对象如何使用