Vue前端AES加解密使用步骤

1. 在工程中安装crypto-js插件：

npm install --save crypto-js

     2.在vue项目中，创建接口js，比如crypto-aes.js；

import CryptoJS from 'crypto-js'
// 默认的 KEY 与 iv，如果使用默认，需要保证后台也一并使用下面2个常量值。
const KEY = CryptoJS.enc.Utf8.parse('xxxxxxxx');
const IV = CryptoJS.enc.Utf8.parse('xxxxxxxx');
/**
 * AES加密:word加密字符串，以及字符串key、iv  返回base64
 */
export function Encrypt(word, keyStr, ivStr) {
  let key = KEY;
  let iv = IV;
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
  const srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,  //AES的CBC加密模式
    padding: CryptoJS.pad.ZeroPadding
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}
/**
 * 解密:字符串 key iv  返回base64
 */
export function Decrypt(word, keyStr, ivStr) {
  let key = KEY;
  let iv = IV;
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
  const base64 = CryptoJS.enc.Base64.parse(word);
  const src = CryptoJS.enc.Base64.stringify(base64);
  const decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

      3.在前端vue工程中，引入相应js后，根据需要调用对应加解密接口。

在vue工程中，引用对应的js：

 import  * as crypto from '../crypto-aes.js';//引入第二步骤创建的加解密js

在vue工程中，调用加解密接口： 

 password=crypto.Encrypt(password); //加密用户密码