前端vue项目中cryptoJS AES加密

AES ：对称加密。加解密的双方使用同一个密钥，密钥不能在网络中传输，避免被拦截。

          如果要传输，必须要对密钥进行非对称加密再加密一次。

1.先在vue项目中安装crypto-js

   npm install crypto-js

2.新建一个secret.js文件

3.secret.js内容

//引用AES源码js
const CryptoJS = require('crypto-js');

const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");//十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');//十六位十六进制数作为密钥偏移量

//解密方法
// function Decrypt(word) {
//    //先将Base64还原一下，因为加密的时候做了一些字符的替换
//     const restoreBase64 = word.replace(/\-g/,'+').replace(/_/,'/');
//
//     //返回的是解密后的对象
//     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){
    console.log('组件里的：',word);
    let srcs = CryptoJS.enc.Utf8.parse(word);
     //CipherOption,加密的一些选项：
    //mode:加密模式，可取值（CBC,CFB,CTR,CTRGladman,OFB,ECB),都在CryptoJS.mode对象下
    //padding:填充方式，可取值（Pkcs7,Ansix923,Iso10126,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}
export {Encrypt}

4.vue页面内容

import {Encrypt} from "../../utils/secret";

var userName = Encrypt(this.userName)//加密用户名
var userPassword = Encrypt(this.password)//加密用户密码

console.log('加密后：',userName)

console.log('加密后：',userPassword)