前端使用crypto-js 的 aes 进行加密与解密，密码传输

前言
项目中 经常有修改密码的功能，但是前端要求在密码传输过程中使用密文，使用明文展示。网上很多都不完整，这里写一下，我亲测有用的一个方法

正文
配置：crypto-js aes 加解密
引入 crypto-js ，crypto-js 是一个纯 javascript 写的加密算法类库 ，可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

npm install crypto-js --save
进行下载

新建加密文件 vue-cli项目 在静态资源utils文件夹下新建文件 encrypt.js

• encrypt.js 主要代码

    const CryptoJS = require('crypto-js');  //引用AES源码js
    
    const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
    const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量
    
    //解密方法
    function Decrypt(word) {
        let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
        let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();
    }
    
    //加密方法
    function Encrypt(word) {
        let srcs = CryptoJS.enc.Utf8.parse(word);
        let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        return encrypted.ciphertext.toString().toUpperCase();
    }
    
    export default {
        Decrypt ,
        Encrypt
    }

• 使用方法

<template>
    <div>
        <input type="text" :value="paasword">
        <button type="submit" @click="submit">提交</button>
    </div>
</template>
<script>
    import encrypt from '@/util/encrypt'
    export default {
        data() {
            return {
                paasword: '我是密码123'
            }
        },
        created() {
            // 解密--常用于反显修改数据
            // 这里从后台请求到的密文数据
            getPasswordApi().then(res => {
                let paasword = res.data.paasword
                console.log(`解密前${paasword}`)
                
                this.paasword = encrypt.Decrypt(paasword)
                
                console.log(`解密后${paasword}`)
            })
        },
        methods: {
            submit() {
                // 加密
                console.log(`加密前${paasword}`)
                let paasword = encrypt.Encrypt(this.paasword)
                //发请求给后台
                console.log(`加密后${paasword}`)
            }
        },
    }
</script>

结语

• 以上就实现了使用aes 加密解密方法，感觉这个比base64的安全性较高一些。这里是使用vue项目中的方法，同理其他框架适用，只是绑定数据的方式不同而已，主要就是请求的时候解密，提交的时候加密，很简单 over~。
• 本篇纯属转载 原创地址：原创链接