想到使用AES加密的都应该知道这种加密该用在什么场景中，直切主题。
第一步，安装crypto-js的依赖：
1 | npm install crypto-js --save |
第二步：在工具类文件夹(utils)下新建secret.js文件，封装公共方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | //引入crypto-js const CryptoJS = require('crypto-js'); //十六位十六进制数作为密钥（秘钥为随机生成，必须与后端保持一致！） const key = CryptoJS.enc.Utf8.parse("J4ny0Ja678Y7P2so"); //十六位十六进制数作为密钥偏移量（秘钥为随机生成，必须与后端保持一致！） const iv = CryptoJS.enc.Utf8.parse('pTNorfvZW2UZJbd0'); //解密方法 function Decrypt(word:any) {<!-- --> // 先将 Base64 还原一下, 因为加密的时候做了一些字符的替换 const restoreBase64 = word.replace(/\-/g,'+').replace(/_/g,'/'); // 这里 mode, padding, iv 一定要跟加密的时候完全一样 // 返回的是一个解密后的对象 let decrypt = CryptoJS.AES.decrypt(restoreBase64, key, {<!-- --> iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); // 将解密对象转换成 UTF8 的字符串 let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); // 返回解密结果 return decryptedStr.toString(); } //加密方法 function Encrypt(word:any) {<!-- --> let srcs = CryptoJS.enc.Utf8.parse(word); /** * CipherOption, 加密的一些选项: * mode: 加密模式, 可取值(CBC, CFB, CTR, CTRGladman, OFB, ECB), 都在 CryptoJS.mode 对象下 * padding: 填充方式, 可取值(Pkcs7, AnsiX923, Iso10126, Iso97971, ZeroPadding, NoPadding), 都在 CryptoJS.pad 对象下 * iv: 偏移量, mode === ECB 时, 不需要 iv * 返回的是一个加密对象 */ let encrypted = CryptoJS.AES.encrypt(srcs, key, {<!-- --> iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); //将结果进行base64加密 return encrypted.ciphertext.toString(CryptoJS.enc.Base64); } export {<!-- -->Decrypt , Encrypt} |
第三步：页面中进行引用
1.对密码进行加密：
1 2 3 4 5 6 7 8 | <script> import {<!-- --> Encrypt } from '../../utils/secret.js' export default {<!-- --> created(){<!-- --> this.userPassword = Encrypt(this.password) // 加密用户密码 } } </script> |
2.解密：
1 2 3 4 5 6 7 8 | <script> import {<!-- --> Decrypt } from '../../utils/secret.js' export default {<!-- --> created(){<!-- --> this.encryptionName = Decrypt(this.username) // 解密用户名 } } </script> |
加密解密的使用就完成了！