基于SpringBoot+vue实现前后端数据加解密
作者：fking86
这篇文章主要给大家介绍了基于SpringBoot+vue实现前后端数据加解密,文中有详细的示例代码,具有一定的参考价值,感兴趣的小伙伴可以自己动手试一试
前端
1.前期准备
需要安装node环境
安装好之后然后执行
npm install crypto-js
2.前端代码
pages->utils->Secret.js
import CryptoJS from 'crypto-js'
// 默认的 KEY 与 iv 如果没有给
const KEY = CryptoJS.enc.Utf8.parse("63eeac68cf074c8c");
const IV = CryptoJS.enc.Utf8.parse('63eeac68cf074c8c');
/**
* 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();
}pages->index->index.vue
<template>
<div>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
<br>
<button type="submit" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
import { reactive } from 'vue';
import {Encrypt} from '../utils/Secret.js'
export default {
data: function() {
return {
username: '',
password: ''
}
},
methods: {
login: function() {
let userName = this.username;
let pword = this.password;
console.log("userName:"+userName+"password1:"+pword);
pword = Encrypt(pword);
console.log("password2:"+pword);
fetch('http://localhost:8100/api/demo/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userName: userName,
passward: pword
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
}
};
</script>后端
1.前期准备
pom.xml引入
<dependencies>
<!--密码解密-->
<dependency>
<groupId>org.bouncycastle</groupId>
<artifactId>bcprov-jdk15on</artifactId>
<version>1.60</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.alibaba.fastjson2</groupId>
<artifactId>fastjson2</artifactId>
<version>2.0.23</version>
</dependency>
</dependencies>2.代码
org.example.utils.SecretUtils
package org.example.utils;
import org.apache.tomcat.util.codec.binary.Base64;
import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
/**
* @author coderJim
* @date 2023-04-25 00:07
*/
public class SecretUtils {
/***
* key和iv值可以随机生成
*/
private static String KEY = "63eeac68cf074c8c";
private static String IV = "63eeac68cf074c8c";
/***
* 加密
* @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 PkcsPadding
Cipher 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);
return Base64.encodeBase64String(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;
}
}
} org.example.DemoContoller
package org.example;
import com.alibaba.fastjson2.JSONObject;
import org.example.utils.SecretUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @author coderJim
* @date 2023-04-25 00:24
*/
@RestController
@RequestMapping("/api/demo")
public class DemoContoller {
@PostMapping("login")
public Boolean login(@RequestBody(required = true) JSONObject json){
String passward = json.getString("passward");
passward = SecretUtils.desEncrypt(passward);
System.out.println("passward:"+passward);
return true;
}
}到此这篇关于基于SpringBoot+vue实现前后端数据加解密的文章就介绍到这了,更多相关SpringBoot+vue数据加解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！