vue使用Crypto.js进行加密解密;
使用效果图如下:
1,在输入框中输入内容,点击加密
;
2,然后把加密后的密文 复制到输入框中;点击输入密文,点击解密
;
3,点击清空
,清空所有数据;
1,npm安装
因为这个库在在生产环境是会用到的,所以安装时要使用 --save;
npm install crypto-js --save
2,组件中引入
const CryptoJS = require('crypto-js');
3,开始使用
需要注意的是:setPassword和getPassword分别为加密方法和解密方法;
大家还可以自己进行封装一下,引入使用;
<template>
<div >
<!-- 加密 和解密 -->
<hr />
<div class="Crypto">
<h3>Crypto.js加解密演示:</h3>
<input type="text" placeholder="请输入密码" v-model="password" />
<button @click="setPasswordClick">输入内容,点击加密</button>
<button @click="getPasswordClick">输入密文,点击解密</button>
<button @click="clear">清空</button>
<p>加密后的密码 is: {{ setPasswordText }}</p>
<p>解密后的密码 is: {{ getPasswordText }}</p>
</div>
</div>
</template>
<script>
const CryptoJS = require('crypto-js');
export default {
data() {
return {
setPasswordText: '',
getPasswordText: '',
password: '',
};
},
methods: {
// 清除关于加密的数据
clear() {
this.password = '';
this.setPasswordText = '';
this.getPasswordText = '';
},
// 点击加密
setPasswordClick() {
if (!this.password) {
return alert('请输入需要加密的密码!');
}
this.setPasswordText = this.setPassword(this.password);
},
// 点击解密
getPasswordClick() {
if (this.password) {
console.log('开始解密');
this.getPasswordText = this.getPassword(this.password);
if (!this.getPasswordText) {
return alert('请输入正确的密文!');
}
return;
}
console.log('解密后的数据:', this.getPasswordText);
this.getPasswordText = this.getPassword(this.setPasswordText);
},
/**
* @encription: 加密
* @param {*} word 需要加密的内容
* @param {*} keyStr 自定义秘钥
*/
setPassword(word, keyStr) {
keyStr = 'abcdefgabcdefg12'; // 16位的密钥,自己定义,和下面的密钥要相同
var key = CryptoJS.enc.Utf8.parse(keyStr); // 字符串到数组转换,解析秘钥
var srcs = CryptoJS.enc.Utf8.parse(word); // 字符串到数组转换,解析明文
// mode:加密方式;padding:填充方式;iv便宜向量(可选)
var encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
});
return encrypted.toString(); // 加密后的结果是对象,要转换为文本
},
/**
* @description: 解密
* @param {*} word 需要解密的内容
* @param {*} keyStr 自定义秘钥 需要和加密时使用的一致
*/
getPassword(word, keyStr) {
keyStr = 'abcdefgabcdefg12'; // 16位的密钥,自己定义,和下面的密钥要相同
var key = CryptoJS.enc.Utf8.parse(keyStr); // 字符串到数组转换
var decrypt = CryptoJS.AES.decrypt(word, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
});
return CryptoJS.enc.Utf8.stringify(decrypt).toString(); // 数组到字符串转
},
},
};
</script>
<style lang="scss" scoped>
.Crypto{
h3{
margin: 5px 0;
}
margin-top: 10px;
button{
margin: 0 5px;
}
}
</style>