前端
要引用elementui和 CryptoJS
//安装
npm install crypto-js --save-dev
import CryptoJS from 'crypto-js';
//向量
//密钥
const key = CryptoJS.enc.Utf8.parse("1234567890123456");
//向量
const iv = CryptoJS.enc.Utf8.parse("abcdefghijklmnop");
export default {
//加密
encrypt(word) {
let srcs = CryptoJS.enc.Utf8.parse(word);
//设置加密密钥、向量、类型、填充
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
//返回Base64的密文
return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
},
//解密
decrypt(word) {
//接收密文转Base64
let encryptedBaseStr = CryptoJS.enc.Base64.parse(word);
let srcs = CryptoJS.enc.Base64.stringify(encryptedBaseStr);
let decrypt = CryptoJS.AES.decrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
}
vue 页面中去使用
<template>
<div id="app">
<div>
<el-input type="textarea"
v-model="test1"
style="display:inline-block"></el-input>
<el-button type="primary"
@click="submitForm(test1)">加密</el-button>
<el-button type="primary"
@click="resetForm(test1)">解密</el-button>
</div>
<div>
<el-input type="textarea"
v-model="test2"></el-input>
</div>
</div>
</template>
<script>
import AES from "@/common/AES.js";
export default {
name: 'App',
data () {
return {
test1: '',
test2: '',
}
},
created () {
// //加密 encrypt
// var encrypts = AES.encrypt(JSON.stringify(cars));
// //加密 encrypt
// var dess = JSON.parse(AES.decrypt(encrypts));
},
methods: {
//加密
submitForm (str) {
this.test2 = AES.encrypt(str)
},
//解密
resetForm (str) {
debugger
this.test2 = AES.decrypt(str);
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>