前言
项目中 经常有修改密码的功能,但是前端要求在密码传输过程中使用密文,使用明文展示。网上很多都不完整,这里写一下,我亲测有用的一个方法
正文
配置:crypto-js aes 加解密
引入 crypto-js ,crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、Triple DES 加解密。
npm install crypto-js --save
进行下载
新建加密文件 vue-cli项目 在静态资源utils文件夹下新建文件 encrypt.js
- encrypt.js 主要代码
const CryptoJS = require('crypto-js'); //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为密钥偏移量
//解密方法
function Decrypt(word) {
let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
//加密方法
function Encrypt(word) {
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
return encrypted.ciphertext.toString().toUpperCase();
}
export default {
Decrypt ,
Encrypt
}
- 使用方法
<template>
<div>
<input type="text" :value="paasword">
<button type="submit" @click="submit">提交</button>
</div>
</template>
<script>
import encrypt from '@/util/encrypt'
export default {
data() {
return {
paasword: '我是密码123'
}
},
created() {
// 解密--常用于反显修改数据
// 这里从后台请求到的密文数据
getPasswordApi().then(res => {
let paasword = res.data.paasword
console.log(`解密前${paasword}`)
this.paasword = encrypt.Decrypt(paasword)
console.log(`解密后${paasword}`)
})
},
methods: {
submit() {
// 加密
console.log(`加密前${paasword}`)
let paasword = encrypt.Encrypt(this.paasword)
//发请求给后台
console.log(`加密后${paasword}`)
}
},
}
</script>
结语
- 以上就实现了使用aes 加密解密方法,感觉这个比base64的安全性较高一些。这里是使用vue项目中的方法,同理其他框架适用,只是绑定数据的方式不同而已,主要就是请求的时候解密,提交的时候加密,很简单 over~。
- 本篇纯属转载 原创地址:原创链接