Vue 使用crypto-js进行AES加密

想到使用AES加密的都应该知道这种加密该用在什么场景中，直切主题。

第一步，安装crypto-js的依赖：

npm install crypto-js --save

第二步：在工具类文件夹(utils)下新建secret.js文件，封装公共方法。

//引入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.对密码进行加密：

<script>
import { Encrypt } from '../../utils/secret.js'
export default {
   created(){
      this.userPassword = Encrypt(this.password) // 加密用户密码
   }
}
</script>

2.解密：

<script>
import { Decrypt } from '../../utils/secret.js'
export default {
   created(){
      this.encryptionName = Decrypt(this.username) // 解密用户名
   }
}
</script>

加密解密的使用就完成了！