在做前端开发的时候，页面上有很多的地方是需要用户输入信息的，但是有些信息又很敏感，比如客户的姓名、电话号码、身份证号码、银行卡号及密码等等这些，如果没有进行加密处理，很容易被别人截取到，项目中应用到cryptoJS的AES模式加密，简单整理如下：

      一. 通过npm引入cryptoJS

           npm install crypto-js --save-dev

      二.在utils的文件夹下，创建一个js文件，这里叫cryptoAES.js，目录结构如下：

     三. 实现AES加密方法

         a.先引入cryptoJS：

            import CryptoJs from 'crypto-js'

         b.添加加解密方法，代码如下：

import CryptoJs from 'crypto-js'

export default {
  /**
   * 加密
   */
  encrypt(word) {
    let key = CryptoJs.enc.Utf8.parse("1234567890ABCDEF");
    let srcs = CryptoJs.enc.Utf8.parse(word);
    let encrypted = CryptoJs.AES.encrypt(srcs, key, {
      mode: CryptoJs.mode.ECB,
      padding: CryptoJs.pad.Pkcs7
    });
    return encrypted.toString();
  },

  /**
   * 解密
   */
  decrypt(word) {
    let key = CryptoJs.enc.Utf8.parse("1234567890ABCDEF");
    let decrypt = CryptoJs.AES.decrypt(word, key, {
      mode: CryptoJs.mode.ECB,
      padding: CryptoJs.pad.Pkcs7
    });
    return CryptoJs.enc.Utf8.stringify(decrypt).toString();
  }

}

     四. 引入加密方法

          a.在需要的组件中，引入加密文件即可，引入如下：

             import cryptoAES from './cryptoAES'

          b.调用加密方法：

// 前端密码进行AES加密传输
    let password = vm.form.password;
    password = cryptoAES.encrypt(password);

     

       需要注意的地方有几点：（1）加密的秘钥的长度必须是8的整数倍，如果不是，解码的结果为空；（2）我们加密的可能会是字符串或者一个对象，所以加密时得做判断先，方法已经写好了，注意下就行了；（3）实际开发肯定是前后端一起的，所以前后端统一秘钥进行加解密即可，后端采用了java的解密方法；（4）项目环境中，在代码编译阶段产生ES5、ES6编译冲突，需要根据具体场景解决。

       参考文章：

                     前后端AES加密解密,前端使用CryptoJS,后端Java实现

                     vue 中引入cryptoJS