需求：
前端请求到后端返回的数据，涉及到一些敏感的数据，需要进行加密处理，前端进行解密。
- 接口请求到的加密数据
- 打印解密后的数据
思路：
- 后端加密，前端解密；后端生成加密的key值，告诉前端，前端解密的时候也需要使用该key值去解密。
- 前端首先需要在index.html中引入cdn插件crypto.js。
- 封装一个公共的解密函数。
- 在具体的vue组件中直接调用解密函数。
代码：
前端代码
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-shop</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>
<!-- 引入解密插件 -->
<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
</body>
</html>// format.js
exports.install = function (Vue, options) {
Vue.prototype.decryptByAES = (ciphertext) => {
var key = '12345ABCDErwerw2'
var keyHex = CryptoJS.enc.Utf8.parse(key)
var result = CryptoJS.AES.decrypt(ciphertext, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
})
var resultValue = result.toString(CryptoJS.enc.Utf8)
return resultValue
}
}// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
// 导入
import formatJS from '@/utils/format'
// 注册 这样就可以在全局使用该方法了
Vue.use(formatJS)
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})// config/index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/imp': {
target: 'http://10.134.117.121:8609',
changeOrigin: true,
pathRewrite: {
'^/' : ''
}
},
// 请求的加密接口为该服务下的一个接口，需要代理服务器实现跨域请求
'/jupiter': {
target:'http://api.zhire.cc',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
},
},
host: '0.0.0.0',
port: 8080,
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
}
}// index.vue
<template>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
export default {
data () {
return {
listParams: {
query_type: '1',
query_date: '2021-02-15',
query_month: '',
query_year: '',
dateStart: '',
dateStop: '',
platformId: ''
},
}
}
}
methods: {
getLists () {
axios.create({
baseURL: '/jupiter'
}).get('/i/box/list', {
params: {
query_type: '1',
query_date: '2021-02-15'
}
}).then(response => {
let data = response.data.data.list
// let resetdata = data.map(function (item, index, ary) {
// return Vue.prototype.decryptByAES(item.income)
// })
// console.log('resetdata', resetdata, 'data', data)
data.forEach(item => {
item.income = Vue.prototype.decryptByAES(item.income)
})
console.log('data2', data)
})
},
}
</script>后端代码
import org.apache.commons.codec.binary.Base64;
import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
public class AesUtils {
private static final String ALGORITHMSTR = "AES/ECB/PKCS5Padding";
/**
* 加密
*
* @param content 待加密的内存
* @param key 加密key（长度要超过16）
* @return
*/
public static String encrypt(String content, String key) {
try {
//获得密码的字节数组
byte[] raw = key.getBytes();
//根据密码生成AES密钥
SecretKeySpec skey = new SecretKeySpec(raw, "AES");
//根据指定算法ALGORITHM自成密码器
Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
//初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
cipher.init(Cipher.ENCRYPT_MODE, skey);
//获取加密内容的字节数组(设置为utf-8)不然内容中如果有中文和英文混合中文就会解密为乱码
byte[] byte_content = content.getBytes("utf-8");
//密码器加密数据
byte[] encode_content = cipher.doFinal(byte_content);
//将加密后的数据转换为字符串返回
return Base64.encodeBase64String(encode_content);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 解密
*
* @param encryptStr
* @param decryptKey
* @return
*/
public static String decrypt(String encryptStr, String decryptKey) {
try {
//获得密码的字节数组
byte[] raw = decryptKey.getBytes();
//根据密码生成AES密钥
SecretKeySpec skey = new SecretKeySpec(raw, "AES");
//根据指定算法ALGORITHM自成密码器
Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
//初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
cipher.init(Cipher.DECRYPT_MODE, skey);
//把密文字符串转回密文字节数组
byte[] encode_content = Base64.decodeBase64(encryptStr);
//密码器解密数据
byte[] byte_content = cipher.doFinal(encode_content);
//将解密后的数据转换为字符串返回
return new String(byte_content, "utf-8");
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
public static void main(String[] args) {
// 加密的key,前后端需要保持一致
String key = "12345ABCDErwerw2";
// 加密
String s = encrypt("hello", key);
System.out.println(s);
// 解密
String s1 = decrypt(s, key);
System.out.println(s1);
}
}
// 接口http://api.zhire.cc/jupiter/i/box/list?query_type=1&query_date=2021-02-01参考文章：
前后端分离API接口如何加密 —— AES加密方案对称加密和非对称加密（一）初步理解[安全与协议]使用crypto.js进行加密详解AES加密算法的详细介绍与实现vue-cli本地环境API代理设置和解决跨域浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
