Vue vue项目中使用AES加密

谁践踏了优雅 2023-06-16 03:56 167阅读 0赞

### Vue vue项目中使用AES加密 ###

*  vue项目中使用AES加密
 *   *   *  安装 crypto-js
         *  加入AES加密的文件
         *   *   *  在项目中新建一个文件 Aes.js
                 *  Aes.js
         *  引入AES加密模块
         *  应用举个栗
         *  一个小问题

# vue项目中使用AES加密 #

### 安装 crypto-js ###

npm install crypto-js

![npm crypto-js的图片][npm 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位时，可以进行加密，但是解密出来的值为空。

[npm crypto-js]: https://img-blog.csdnimg.cn/20191124104733724.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm,size_16,color_FFFFFF,t_70