在 vue项目使用AES加密

系统管理员 2022-12-29 09:12 107阅读 0赞

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

**1、安装依赖**  
npm i crypto-js --save

**2、新建Aesutil.js文件，这里我是放到了utils文件夹下面**

import CryptoJS from 'crypto-js/crypto-js'
    
    // 默认的 KEY 与 iv 如果没有给
    const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
    const IV = CryptoJS.enc.Utf8.parse('1234567890123456');
    
    /** * AES加密 ：字符串 key iv 返回base64 */
    export function Encrypt(word, keyStr) { 
        let key = KEY
    
        if (keyStr) { 
            key = CryptoJS.enc.Utf8.parse(keyStr);
        }
    
        let srcs = CryptoJS.enc.Utf8.parse(word);
        const encrypted = CryptoJS.AES.encrypt(srcs, key, { 
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        // console.log("-=-=-=-", encrypted.ciphertext)
        return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    
    }
    
    /** * AES 解密 ：字符串 key iv 返回base64 * * @return {string} */
    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);
        }
    
        let base64 = CryptoJS.enc.Base64.parse(word);
        let 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、在组件中使用,我这是在重置密码的时候需要加密后传给后台。

import { Encrypt} from '@/utils/Aesutil.js'
    var managerKey='******' //和后台约定好的key
    var data={ 
    	password:Encrypt(this.ruleForm.oldPassword,managerKey),
    	confirmPassword:Encrypt(this.ruleForm.resetPassword,managerKey),
    	resetPassword:Encrypt(this.ruleForm.resetPassword,managerKey),
    }