SpringBoot+Vue中使用AES进行加解密(加密模式等对照关系)

以你之姓@ 2023-09-30 20:03 13阅读 0赞

## 场景 ##

若依前后端分离版本地搭建开发环境并运行项目的教程：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_霸道流氓气质的博客-CSDN博客][-CSDN]

在上面搭建起来前后端架构之后，在前后端分别进行AES方式的加解密。

Android+Java中使用Aes对称加密的工具类与使用：

[Android+Java中使用Aes对称加密的工具类与使用\_霸道流氓气质的博客-CSDN博客][Android_Java_Aes_-CSDN]

Java与Winform进行AES加解密数据传输的工具类与对应关系和示例：

[Java与Winform进行AES加解密数据传输的工具类与对应关系和示例\_霸道流氓气质的博客-CSDN博客][Java_Winform_AES_-CSDN]

上面分别讲了在SpringBoot以及Android和Winform中的AES加解密的对应关系。

如果是SpringBoot与前端Vue进行交互的话，在Vue中如何进行AES加解密。

注意这里的对应关系

Java AES加密中的ECB加密模式对应于Vue中的CryptoJS.mode.ECB模式;

Java中的PKCS5Padding填充方式，对应于Vue中的CryptoJS.pad.Pkcs7;

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]

## 实现 ##

1、安装依赖

npm install crypto-js --save

2、封装加解密工具类

import CryptoJS from 'crypto-js'
    
     export default {
       //加密
       encrypt(word, keyStr) {
         // 当未输入秘钥时，以下代码设置默认的秘钥
         keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
         var key = CryptoJS.enc.Utf8.parse(keyStr);
         var srcs = CryptoJS.enc.Utf8.parse(word);
         var encrypted = CryptoJS.AES.encrypt(srcs, key, {
           mode: CryptoJS.mode.ECB,
           padding: CryptoJS.pad.Pkcs7
         });
         return encrypted.toString();
    
       },
       //解密
       decrypt(word, keyStr) {
         // 当未输入秘钥时，以下代码设置默认的秘钥
         keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
         var key = CryptoJS.enc.Utf8.parse(keyStr);
         var decrypt = CryptoJS.AES.decrypt(word, key, {
           mode: CryptoJS.mode.ECB,
           padding: CryptoJS.pad.Pkcs7,
         });
         return decrypt.toString(CryptoJS.enc.Utf8).toString();
       },
       //生成AES 16位秘钥
       getKey() {
         let len = 16;
         let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz1234567890';
         let maxPos = chars.length;
         let character = '';
         for (let i = 0; i < len; i++) {
           character += chars.charAt(Math.floor(Math.random() * maxPos))
         }
         return character;
       }
     }

3、加解密调用

<template lang="html">
    
    </template>
    
    <script>
    import AES from "@/utils/aes";
    export default {
      name: "aesEncrpt",
      data() {},
      mounted() {
        var key = "badaodechengxvyu";
        var ss = AES.encrypt("https://blog.csdn.net/BADAO_LIUMANG_QIZHI", key);
        console.log("AES加密：" + ss);
        console.log("AES解密 ： " + AES.decrypt(ss, key));
      },
      methods: {
    
      },
    };
    </script>
    
    <style lang="css">
    </style>

4、调用结果

![22e204517b004581a606c7e22cb1acbc.jpeg][]

[-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[Android_Java_Aes_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/111540501
[Java_Winform_AES_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/129357081
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[22e204517b004581a606c7e22cb1acbc.jpeg]: https://img-blog.csdnimg.cn/22e204517b004581a606c7e22cb1acbc.jpeg