Vue vue项目中使用AES加密

vue项目中使用AES加密

安装 crypto-js

npm install crypto-js

加入AES加密的文件

在项目中新建一个文件 Aes.js

可以新建在 src\utils\Aes.js（文件名随意，目录尽量方便找到）

Aes.js

import CryptoJS from 'crypto-js/crypto-js'

/*
 * 默认的 KEY IV     如果在加密解密的时候没有传入KEY和IV,就会使用这里定义的
 * 
 * 前后端交互时需要前后端密钥和初始向量保持一致
 */

const KEY = CryptoJS.enc.Utf8.parse("1234567890ABCDEF");//  密钥        长度必须为16位
const IV = CryptoJS.enc.Utf8.parse("123456");           //  初始向量    长度随意

/*
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt(str, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr && ivStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let srcs = CryptoJS.enc.Utf8.parse(str);
    var encrypt = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,            //这里可以选择AES加密的模式
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Base64.stringify(encrypt.ciphertext);
}

/*
 * AES 解密 ：字符串 key iv  返回base64
 */
export function Decrypt(str, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr && ivStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let base64 = CryptoJS.enc.Base64.parse(str);
    let src = CryptoJS.enc.Base64.stringify(base64);

    var decrypt = CryptoJS.AES.decrypt(src, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,            //这里可以选择AES解密的模式
        padding: CryptoJS.pad.Pkcs7
    });

    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

引入AES加密模块

在需要使用AES加密解密的方法的Vue组件中引入AES加密解密模块

import { Encrypt, Decrypt } from "@/utils/Aes.js";

使用AES加密解密的方法

let a = "Hello World!";
        console.log(a);
        // Encrypt 加密
        a = Encrypt(a);
        console.log(a);
        // Decrypt 解密
        a = Decrypt(a);
        console.log(a);

应用举个栗

axios({
  url: '/api/aaa/bbb',	// 后端的接口地址
  method: 'post',
  data: {
    userName: Encrypt(this.userName),
    password: Encrypt(this.password),
  },
  transformRequest: [function (data) {
    data = Qs.stringify(data);
    return data;
  }],
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
  dataType: "json"
})
  .then(res => {
    console.log("连接成功");		// 这里多打印一句提示，只是为了更直观一点
    console.log(res);			// res 是后端回传的数据，如果连接成功，可以把res打印出来。
  })
  .catch(function (error) {
  	console.log("连接失败");		// 作用同上
    console.log(error);			// 如果连接失败，会抛出错误信息。
  });

一个小问题

KEY长度必须是16位，IV长度任意
KEY长度不是16位时，可以进行加密，但是解密出来的值为空。