vue 中引入cryptoJS

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在搞前端开发的时候，页面上有很多的地方是需要用户输入信息的，但是有些信息又很敏感，比如客户的姓名、电话号码、身份证号码、银行卡号及密码等等这些，如果没有进行加密处理，很容易被别人截取到，项目中应用到cryptoJS的AES模式加密，然后自己就抽空研究了下，下面是学习的过程

参考文章：

关于CryptoJS中md5加密以及aes加密的随笔

前后端AES加密解密,前端使用CryptoJS,后端Java实现

如何使用CryptoJS的AES方法进行加密和解密

（一）通过cnpm或者npm引入cryptoJS

npm install crypto-js --save-dev或cnpm install crypto-js --save-dev

（二）在src文件夹下创建一个叫tools的文件夹，然后在tools下创建一个js文件，这里我直接叫jiami.js了（简单粗暴点），目录结构如下：

（三）实现AES加密解密方法

①先引入cryptoJS

import cryptoJs from 'crypto-js'

②添加加密解密方法并将它们暴露出来，方便引入，代码如下：

'use strict'import cryptoJs from 'crypto-js'
let keyOne = '313233343536373a'export default {
// 加密函數
jiami (word) {
console.log(word)
console.log('秘钥长度为：', keyOne.length)
let key = cryptoJs.enc.Hex.parse(keyOne)
let enc = ''
if (typeof word === 'string') {
enc = cryptoJs.AES.encrypt(word, key, {
// iv: iv
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
})
} else if (typeof word === 'object') {
let data = JSON.stringify(word)
enc = cryptoJs.AES.encrypt(data, key, {
// iv: iv
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
})
}
let encResult = enc.ciphertext.toString()
return encResult
},
// 解密函數
jiemi (word) {
console.log('传入的密文：', word)
let key = cryptoJs.enc.Hex.parse(keyOne)
let dec = cryptoJs.AES.decrypt(cryptoJs.format.Hex.parse(word), key, {
// vi: vi
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
})
let decData = cryptoJs.enc.Utf8.stringify(dec)
return decData
}
}