vue中请求参数使用加密

本文介绍了在Vue.js应用中如何对POST请求的JSON参数进行加密,通过创建一个专门的JS文件来处理加密逻辑,并在前端页面调用。同时,文章也提及后端如何解密这些加密数据,确保数据传输的安全。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

post请求后端json字符串加密 创建一个js文件

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, ivStr) {
  let key = KEY;
  let iv = IV;
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
  let srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
  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);

  let decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });

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

页面中调用

import {Encrypt,Decrypt} from '../../assets/js/secret'
var obj = new Object();
            obj.token = userinfo.token;
            obj.pagenum = this.currentPage;
            obj.pagerow = this.pageSize;
            obj.nodedata = this.nodedata;
            // obj.hidden_status = 3;
            var jsonobj = JSON.stringify(obj);
            var jms = Encrypt(jsonobj);
            console.log(jms)
            //发送post请求
            axios.post(this.$store.state.WHPATH+'/XXX/XXX', 
            {
                xxx: jms   //后端直接获取map中的xxx进行解密
            },{
                // 单独配置
                withCredentials: true
            }).then((res)=>{
                console.log(res.data);
                if(res.data.code == 2001){
                    this.$nextTick(() => {
                        this.$router.replace('/login');
                    });
                }else if(res.data.code == 506){
                    this.$message({
                        message: res.data.msg,
                        type: 'warning' 
                    });
                }else{
                    console.log(res.data)
                }
            }).catch(function (response) {
                 console.log(response);
            }); 
        },

后端处理 ESN类也有

public static Map<String, Object> newMap(Map<String, Object> map) throws Exception {
        String str = (String) map.get("xxx");
        String EJM = ESN.desEncryptX(str);
        Map<String,Object> mmp = JSONObject.parseObject(EJM);
        return mmp;
    }

在这里插入图片描述

Vue3中使用AES对前端接口参数进行加密通常涉及到以下几个步骤: 1. **安装库**: 首先需要安装一个JavaScript的加解密库,如`crypto-js`,它包含了AES(高级加密标准)算法。 ```bash npm install crypto-js ``` 2. **导入并实例化**: 导入`CryptoJS.AES`并创建一个新的AES加密对象。 ```javascript import AES from 'crypto-js/aes'; const aes = AES.createEncryptor('your_secret_key', 'CBC'); ``` `your_secret_key`应是你设置的一个密钥,对于生产环境建议使用环境变量管理,避免直接暴露。 3. **加密数据**: 对需要发送的数据进行加密,例如明文`dataToEncrypt`。 ```javascript let encryptedData = aes.encrypt(JSON.stringify(dataToEncrypt), 'salt'); ``` 这里添加的'salt'(随机盐值)可以增加加密的安全性。 4. **编码base64**: 将加密后的二进制数据转换为Base64字符串,以便于传输。 ```javascript let encodedData = btoa(encryptedData.toString(CryptoJS.enc.Utf8)); ``` 5. **在请求头或URL中发送**: 现在你可以将`encodedData`添加到API请求的headers或URL中作为加密参数。 6. **后端解密**: 后端接收到数据后,同样需要使用相同的秘钥、模式(CBC)和盐值解密数据。 ```javascript // 假设后端已接收并处理了Base64解码的字符串 const decodedData = atob(encodedData); const decryptedData = aes.decrypt(decodedData, 'secret_key'); const decryptedJSON = CryptoJS.enc.Utf8.parse(decryptedData).toString(); ``` **注意事项**: - 加密过程应在服务器端完成,因为客户端容易被破解,而且敏感信息不应暴露在HTTP请求中。 - 使用相同的密钥和模式(CBC),确保前后端保持一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值