1：vue实现加密过程

安装crypto-js

npm install crypto-js 或者yarn add crypto-js

或者

npm install crypto-js --save-dev

在utils下新建secret.js

当然secret.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 = KEY;let iv = IV;if (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});return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);}
/*** AES 解密 ：字符串 key iv  返回base64** @return {string}*/
export function Decrypt(word, keyStr, ivStr) {let key  = KEY;let iv = IV;if (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);let decrypt = CryptoJS.AES.decrypt(src, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding});let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);return decryptedStr.toString();
}

在项目中使用（加密）

import {Encrypt,Decrypt} from '@/utils/secret'

handleSubmit () {//加密用户名和密码let name = Encrypt(this.form.userName);let pwd = Encrypt(this.form.password);//以下代码可以理解为就是一个调用java接口的一个请求，当然贴出的代码并不是这样this.$refs.loginForm.validate((valid) => {if (valid) {this.$emit('on-success-valid', {userName: name,password: pwd})}})}

2：java部分

pom文件引入jar包

   <dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.60</version></dependency>

新建工具类AesEncryptUtil

AesEncryptUtil同样只是一个名字

package com.pactera.automl.common;import org.apache.commons.codec.binary.Base64;import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;/*** @author YSK* @date 2020/8/24 13:13*/
public class AesEncryptUtil {/**** key和iv值可以随机生成*/private static String KEY = "1234567890123456";private static String IV = "1234567890123456";/**** 加密* @param  data 要加密的数据* @return encrypt*/public static String encrypt(String data){return encrypt(data, KEY, IV);}/**** param data 需要解密的数据* 调用desEncrypt（）方法*/public static String desEncrypt(String data){return desEncrypt(data, KEY, IV);}/*** 加密方法* @param data  要加密的数据* @param key 加密key* @param iv 加密iv* @return 加密的结果*/private static String encrypt(String data, String key, String iv){try {//"算法/模式/补码方式"NoPadding PkcsPaddingCipher cipher = Cipher.getInstance("AES/CBC/NoPadding");int 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 解密的结果*/private static String desEncrypt(String data, String key, String iv){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);return new String(original).trim();} catch (Exception e) {e.printStackTrace();return null;}}
}

解密

将加密后的用户名和密码由前端传到后端，后端成功接收后就可以调用工具类的desEncrypt方法解密

  String userName = AesEncryptUtil.desEncrypt(userInfo.getUserName());String passWord = AesEncryptUtil.desEncrypt(userInfo.getPassword());log.info("username : {}  , pwd : {} ",userName,passWord);

3：转载地址

https://blog.csdn.net/weixin_44082001/article/details/108216776?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
https://blog.csdn.net/Aria_Miazzy/article/details/100347899
https://www.cnblogs.com/lyt0207/p/12807433.html

VUE前端实现加密、后端JAVA实现解密功能相关推荐

前端加密后端Java解密
分享一下最简单的处理,前端采用JS自带的 atob加密,后端采用工具解密前端JS代码 //加密字符串,可以先将中文加密,然后再用btoa加密encryption(str) {var encStr = ...
视频教程-VUE前端开发/前后端分离-Java
VUE前端开发/前后端分离 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate.ib ...
java ios 3des_IOS开发入门之iOS 3DES加密和 java 3DES 解密
本文将带你了解IOS开发入门之iOS 3DES加密和 java 3DES 解密,希望本文对大家学ios有所帮助对称加密算法 3des 在iOS 客户端加密算法首先进入头文件: #impo ...
VUE实现一个简单的登录加密和后端（JAVA）解密功能
VUE加密部分一.VUE部分 1.安装crypto-js 2.在libs下新建secret.js 3.在项目中使用(加密) 二.java部分 1.引入jar包 2.新建工具类AesEncryptUt ...
js前端3des加密后台java解密
import java.security.Key; import java.security.SecureRandom; import javax.crypto.Cipher; import java ...
国密SM2前端加密，Java后台解密问题
背景:要实现请求参数加密的功能,使用的是国密SM2算法,前端向后台发送请求获取公钥,将请求加密发送到后台,后台用对应的私钥进行解密问题:前端进行加密的请求,后台无法进行解析解决方案:(此处所用的类 ...
vue前端与Django后端查询一定时间段内的数据
在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据. 这样我们就需要向后端发送时间段的参数,然后在后端处理查询. 这里以Django后端和vue前端的简单例子来记录大致 ...
encryptjs 加密前端数据（vue 使用 RSA加密、java 后端 RSA解密）
1.index.html引入 <script src="./static/js/jsencrypt.min.js"></script> 或者 npm i j ...
angular和JAVA实现aes、rsa加密解密，前后端交互，前端加解密和后端JAVA加解密实现
今天实现了下AES和RSA加密解密,主要的功能是对前后端交互数据进行加密解密,为什么要用到两个算法呢,首先RSA默认的话加密长度是有限的100多个byte吧大约,并且需要公钥私钥,而AES加密没有限制 ...

VUE前端实现加密、后端JAVA实现解密功能

文章目录

1：vue实现加密过程

2：java部分

3：转载地址

VUE前端实现加密、后端JAVA实现解密功能相关推荐

最新文章

热门文章