vue项目中使用AES加密

查看更多资源

1. 案列简介：

vue-cli 脚手架搭建前端项目中，使用AES加密传输数据。

2. 安装依赖

// 命令行
npm i crypto-js --save

3. 新建crypto.js文件

// 新建 src/utils/crypto.js

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

const KEY = CryptoJS.enc.Utf8.parse('retedfgd'); // 'retedfgd' 与后台一致
const IV = CryptoJS.enc.Utf8.parse('asdqwe'); // 'asdqwe' 与后台一致

// 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 encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        // mode: CryptoJS.mode.ECB, 
        mode: CryptoJS.mode.CBC,  // mode 与后台一致
        padding: CryptoJS.pad.Pkcs7,
    });
    return CryptoJS.enc.Base64.stringify(encrypted.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.ECB, 
        mode: CryptoJS.mode.BCB, // 保持一致
        padding: CryptoJS.pad.Pkcs7
    });

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

4. 使用AES加密方法

import {Decrypt,Encrypt} from '@/utils/crypto';

export default {
  methods: {
    handleLogin() {
          let params =  {
            userName: Encrypt(this.loginForm.userName), // aes 加密 用户名
            password: Encrypt(this.loginForm.password), // aes 加密 用户密码
          }
          login(params).then(res => {}).catch(err =>{})
    }
  }
}