jeecg-boot前端加密解密

1、加密

（1）引入需要使用的方法或变量等

import Vue from 'vue'
  import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import { encryption , getEncryptedString } from '@/utils/encryption/aesEncrypt'

（2）在data中定义变量encryptedString

image.png

（3）请求接口获取key和iv并进行赋值与本地存储

image.png

（4）在前端向后台传值之前对需要传递的数据进行加密操作

• 下面的代码写在handleOk里面

注：数据加密过传参过程中，加密特殊符可能会出现丢失（如‘+’在传输中会变为空格），所以可以对特殊字符进行替换

console.log(formData);       //formData为加密前form表单原始数据
          let formmi = encryption(JSON.stringify(formData),that.encryptedString.key,that.encryptedString.iv);    //对数据进行加密
          let formplace = formmi.replace(/\+/g,'@');    //特殊字符的替换：有些字符在传输过程中会丢失，如 ‘+’ 传递到后台时会变为空格（视情况而定）
          let param = 'deEncrypt=' + formplace;      //传参：根据后台接收方式书写不同的传参方式
          console.log(formData);
          console.log(param);
          httpAction(httpurl, param, method)    //请求接口：这里只需把传递的数据更改即可
            .then(res => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });

到这里，只要你的传参参数没问题，加密请求就算完成了！

2、解密

解密用于后台返回的是加密字符串的解密。
jeecg源代码中没有这个解密的函数（最起码我没找到），所以这个解密方法需要自己写上去。

（1）定义解密函数（路径：/utils/encryption/aesEncrypt）

直接写在加密函数 => encryption之后即可

/**
 * 接口数据解密函数
 * @param str string 已加密密文
 * @param key string 加密key(16位)
 * @param iv string 加密向量(16位)
 * @returns {*|string} 解密之后的json对象
 */
export function decryption(str, key, iv) {
    //密钥16位
    var key = CryptoJS.enc.Utf8.parse(key);
    //加密向量16位
    var iv = CryptoJS.enc.Utf8.parse(iv);
    var decrypted = CryptoJS.AES.decrypt(str, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });
    return JSON.parse(decrypted.toString(CryptoJS.enc.Utf8));
}

（2）对请求到的数据进行解密操作，主要用于list接口请求的解密（路径：/mixins/JeecgListMixin）

引入所需要的依赖方法

import Vue from 'vue'
import { ACCESS_TOKEN, ENCRYPTED_STRING } from "@/store/mutation-types"
import { decryption } from '@/utils/encryption/aesEncrypt'

修改loadData()方法中对数据的处理

loadData(arg) {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          if(res.result.records) {        //判断返回数据是否加密，没有加密直接赋值
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }else {
            let ress = res.result.replace(/@/g,'+');        //字符串中特殊字符替换回来
            let resultt = decryption(ress,this.encryptedString.key,this.encryptedString.iv);        //解密
            this.dataSource = resultt.records;        //赋值
            this.ipagination.total = resultt.total;
          }    
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    }

数据解密到这里就结束了