百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

SpringBoot Vue 前后端分离项目接口加解密

zhezhongyun 2025-04-30 21:17 38 浏览

背景

有时候需要对一些关键接口解密传输情况：

  • o 前端请求参数加密，后端解密
  • o 后端返回加密，前端解密
  • o 请求参数和后端返回 都需要加解密

上述三种情况，可以在 controller 层进行拦截操作，使用 ControllerAdvice 对于 RequestBodyAdviceAdapter 和 ResponseBodyAdvice 进行拦截和处理。

主要支持 SM4 和 AES 两种加密算法。

后端实现

创建加解密 Advice

相关依赖类

// ======================DataTypeEnum.java===================================
package com.demo.common;

import lombok.AllArgsConstructor;
import lombok.Getter;

@Getter
@AllArgsConstructor
public enum DataTypeEnum {

    NORMAL(1, "普通数据"),

    ENCRYPT(2, "加密数据"),
    ;
    private final Integer value;

    private final String desc;
}

// ==================ApiEncryptDto.java===================================
package com.demo.domain;

import lombok.Data;

/**
 * 加密数据的表单
 */
@Data
public class ApiEncryptForm {

    private String encryptData;
}


// ====================ResponseDto.java==================================
package com.demo.domain;

import lombok.Data;
import com.demo.common.DataTypeEnum;
import org.apache.commons.lang3.StringUtils;

/**
 * 请求返回对象
 */
@Data
@Schema
public class ResponseDto<T> {

    public static final int OK_CODE = 0;

    public static final String OK_MSG = "操作成功";

    private Integer code;

    private String level;

    private String msg;

    private Boolean ok;

    private T data;

    private Integer dataType;

    public ResponseDto(Integer code, String level, boolean ok, String msg, T data) {
        this.code = code;
        this.level = level;
        this.ok = ok;
        this.msg = msg;
        this.data = data;
        this.dataType = DataTypeEnum.NORMAL.getValue();
    }

    public ResponseDto(Integer code, String level, boolean ok, String msg) {
        this.code = code;
        this.level = level;
        this.ok = ok;
        this.msg = msg;
        this.dataType = DataTypeEnum.NORMAL.getValue();
    }

    public static <T> ResponseDto<T> ok() {
        return new ResponseDto<>(OK_CODE, null, true, OK_MSG, null);
    }

    publicstatic <T> ResponseDto<T> ok(T data) {
        return new ResponseDto<>(OK_CODE, null, true, OK_MSG, data);
    }

    publicstatic <T> ResponseDto<T> okMsg(String msg) {
        return new ResponseDto<>(OK_CODE, null, true, msg, null);
    }
}

DecryptRequestAdvice.java

package com.demo.advice;

import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import com.demo.annotation.ApiDecrypt;
import com.demo.domain.ApiEncryptDto;
import com.demo.service.ApiEncryptService;
import org.apache.commons.io.IOUtils;
import org.springframework.core.MethodParameter;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpInputMessage;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.RequestBodyAdviceAdapter;

import javax.annotation.Resource;
import java.io.InputStream;
import java.lang.reflect.Type;

/**
 * 解密
 */
@Slf4j
@ControllerAdvice
public class DecryptRequestAdvice extends RequestBodyAdviceAdapter {

    private static final String ENCODING = "UTF-8";

    @Resource
    private ApiEncryptService apiEncryptService;

    @Override
    public boolean supports(MethodParameter methodParameter, Type targetType, Class<? extends HttpMessageConverter<?>> converterType) {
        return methodParameter.hasMethodAnnotation(ApiDecrypt.class) || methodParameter.hasParameterAnnotation(ApiDecrypt.class) || methodParameter.getContainingClass().isAnnotationPresent(ApiDecrypt.class);
    }

    @Override
    public HttpInputMessage beforeBodyRead(HttpInputMessage inputMessage, MethodParameter parameter, Type targetType, Class<? extends HttpMessageConverter<?>> converterType)  {
        try {
            String bodyStr = IOUtils.toString(inputMessage.getBody(), ENCODING);
            ApiEncryptDto apiEncryptDto = JSONObject.parseObject(bodyStr, ApiEncryptDto.class);
            if (Objects.isNull(apiEncryptDto.getEncryptData())) {
                return inputMessage;
            }
            String decrypt = apiEncryptService.decrypt(apiEncryptDto.getEncryptData());
            return new DecryptHttpInputMessage(inputMessage.getHeaders(), IOUtils.toInputStream(decrypt, ENCODING));
        } catch (Exception e) {
            log.error("", e);
            return inputMessage;
        }
    }

    @Override
    public Object afterBodyRead(Object body, HttpInputMessage inputMessage, MethodParameter parameter, Type targetType, Class<? extends HttpMessageConverter<?>> converterType) {
        return body;
    }

    @Override
    public Object handleEmptyBody(Object body, HttpInputMessage inputMessage, MethodParameter parameter, Type targetType, Class<? extends HttpMessageConverter<?>> converterType) {
        return body;
    }

    static class DecryptHttpInputMessage implements HttpInputMessage {
        private final HttpHeaders headers;

        private final InputStream body;

        public DecryptHttpInputMessage(HttpHeaders headers, InputStream body) {
            this.headers = headers;
            this.body = body;
        }

        @Override
        public InputStream getBody() {
            return body;
        }

        @Override
        public HttpHeaders getHeaders() {
            return headers;
        }
    }

}

EncryptResponseAdvice.java

package com.demo.advice;

import com.alibaba.fastjson.JSON;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.extern.slf4j.Slf4j;
import com.demo.ResponseDto;
import com.demo.common.DataTypeEnum;
import com.demo.annotation.ApiEncrypt;
import com.demo.service.ApiEncryptService;
import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;

import javax.annotation.Resource;

/**
 * 加密
 */
@Slf4j
@ControllerAdvice
public class EncryptResponseAdvice implements ResponseBodyAdvice<ResponseDto> {

    @Resource
    private ApiEncryptService apiEncryptService;

    @Resource
    private ObjectMapper objectMapper;

    @Override
    public boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {
        return returnType.hasMethodAnnotation(ApiEncrypt.class) || returnType.getContainingClass().isAnnotationPresent(ApiEncrypt.class);
    }

    @Override
    public ResponseDto beforeBodyWrite(ResponseDto body, MethodParameter returnType, MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
        if (body.getData() == null) {
            return body;
        }

        String encrypt = null;
        try {
            encrypt = apiEncryptService.encrypt(objectMapper.writeValueAsString(body.getData()));
        } catch (JsonProcessingException e) {
            throw new RuntimeException(e);
        }
        body.setData(encrypt);
        body.setDataType(DataTypeEnum.ENCRYPT.getValue());
        return body;
    }
}

加解密注解

解密注解 ApiDecrypt

package com.demo.annotation;

import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

/**
 * 解密注解
 */
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.TYPE, ElementType.METHOD})
public @interface ApiDecrypt {
}

加密注解 ApiEncrypt

package com.demo.annotation;

import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

/**
 * 加密注解
 */
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.TYPE, ElementType.METHOD})
public @interface ApiEncrypt {
}

加解密 Service

ApiEncryptService.java

package com.demo.service;

/**
 * 加解密 Service
 */
public interface ApiEncryptService {

    /**
     * 解密
     */
    String decrypt(String data);

    /**
     * 加密
     */
    String encrypt(String data);

}

加解密实现类

1、
ApiEncryptServiceAesImpl.java

AES 加解密：

  • o AES 加密算法支持三种密钥长度：128位、192 位和 256 位，这里选择 128 位
  • o AES 要求秘钥为 128bit，转化字节为 16 个字节
  • o js前端使用 UCS-2 或者 UTF-16 编码，字母、数字、特殊符号等占用 1 个字节

秘钥 Key 组成为：字母、数字、特殊符号一共 16 位即可

package com.demo.service;

import cn.hutool.crypto.symmetric.AES;
import cn.hutool.crypto.symmetric.SM4;
import com.alibaba.fastjson.JSON;
import lombok.extern.slf4j.Slf4j;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.springframework.stereotype.Service;

import java.io.UnsupportedEncodingException;
import java.security.Security;
import java.util.Base64;

/**
 * AES 加密和解密
 */
@Slf4j
public class ApiEncryptServiceAesImpl implements ApiEncryptService {

    private static final String CHARSET = "UTF-8";

    private static final String AES_KEY = "t123456__t123456";

    static {
        Security.addProvider(new BouncyCastleProvider());
    }

    @Override
    public String encrypt(String data) {
        try {
            //  AES 加密 并转为 base64
            AES aes = new AES(hexToBytes(stringToHex(AES_KEY)));
            return aes.encryptBase64(data);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            return "";
        }
    }

    @Override
    public String decrypt(String data) {
        try {
            // 第一步： Base64 解码
            byte[] base64Decode = Base64.getDecoder().decode(data);
            // 第二步： AES 解密
            AES aes = new AES(hexToBytes(stringToHex(AES_KEY)));
            byte[] decryptedBytes = aes.decrypt(base64Decode);
            return new String(decryptedBytes, CHARSET);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            return "";
        }
    }

    /**
     * 16 进制串转字节数组
     *
     * @param hex 16进制字符串
     * @return byte数组
     */
    public static byte[] hexToBytes(String hex) {
        int length = hex.length();
        byte[] result;
        if (length % 2 == 1) {
            length++;
            result = new byte[(length / 2)];
            hex = "0" + hex;
        } else {
            result = new byte[(length / 2)];
        }
        int j = 0;
        for (int i=0; i < length; i += 2) {
            result[j] = hexToByte(hex.substring(i, i + 2));
            j++;
        }
        return result;
    }

    public static String stringToHex(String input) {
        char[] chars = input.toCharArray();
        StringBuilder hex = new StringBuilder();
        for (char c : chars) {
            hex.append(Integer.toHexString((int) c));
        }
        return hex.toString();
    }

    /**
     * 16 进制字符转字节
     *
     * @param hex 16进制字符 0x00到0xFF
     * @return byte
     */
    private static byte hexToByte(String hex) {
        return (byte) Integer.parseInt(hex, 16);
    }
}

2、
ApiEncryptServiceSmImpl.java

SM4 加解密:

  • o 国密 SM4 要求秘钥为 128bit，转化字节为 16 个字节
  • o js 前端使用 UCS-2 或者 UTF-16 编码，字母、数字、特殊符号等占用 1 个字节
  • o java 中每个字母数字也是占用 1 个字节

前端和后端的秘钥 Key 组成为：字母、数字、特殊符号一共 16 位即可

package com.demo.service;

import cn.hutool.crypto.symmetric.SM4;
import lombok.extern.slf4j.Slf4j;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.springframework.stereotype.Service;

import java.security.Security;
import java.util.Base64;

/**
 * SM4 加解密
 */
@Slf4j
@Service
public class ApiEncryptServiceSmImpl implements ApiEncryptService {

    private static final String CHARSET = "UTF-8";

    private static final String SM4_KEY = "t123456__t123456";

    static {
        Security.addProvider(new BouncyCastleProvider());
    }

    @Override
    public String encrypt(String data) {
        try {
            // 第一步： SM4 加密
            SM4 sm4 = new SM4(hexToBytes(stringToHex(SM4_KEY)));
            String encryptHex = sm4.encryptHex(data);
            // 第二步： Base64 编码
            return new String(Base64.getEncoder().encode(encryptHex.getBytes(CHARSET)), CHARSET);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            return "";
        }
    }

    @Override
    public String decrypt(String data) {
        try {
            // 第一步： Base64 解码
            byte[] base64Decode = Base64.getDecoder().decode(data);
            // 第二步： SM4 解密
            SM4 sm4 = new SM4(hexToBytes(stringToHex(SM4_KEY)));
            return sm4.decryptStr(new String(base64Decode));
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            return "";
        }
    }

    public static String stringToHex(String input) {
        char[] chars = input.toCharArray();
        StringBuilder hex = new StringBuilder();
        for (char c : chars) {
            hex.append(Integer.toHexString((int) c));
        }
        return hex.toString();
    }

    /**
     * 16 进制串转字节数组
     *
     * @param hex 16进制字符串
     * @return byte数组
     */
    public static byte[] hexToBytes(String hex) {
        int length = hex.length();
        byte[] result;
        if (length % 2 == 1) {
            length++;
            result = new byte[(length / 2)];
            hex = "0" + hex;
        } else {
            result = new byte[(length / 2)];
        }
        intj=0;
        for (int i=0; i < length; i += 2) {
            result[j] = hexToByte(hex.substring(i, i + 2));
            j++;
        }
        return result;
    }

    /**
     * 16 进制字符转字节
     *
     * @param hex 16进制字符 0x00到0xFF
     * @return byte
     */
    private static byte hexToByte(String hex) {
        return (byte) Integer.parseInt(hex, 16);
    }
}

前端实现

加解密封装

1、encrypt.js

AES 和 SM4 的秘钥 Key 组成为：字母、数字、特殊符号一共 16 位。

import CryptoJS from 'crypto-js';
import CryptoSM from 'sm-crypto';

function object2string(data) {
 if (typeof data === 'object') {
    return JSON.stringify(data);
  }

let str = JSON.stringify(data);
if (str.startsWith("'") || str.startsWith('"')) {
    str = str.substring(1);
  }
if (str.endsWith("'") || str.endsWith('"')) {
    str = str.substring(0, str.length - 1);
  }
return str;
}

/**
 * 字符串转为数字
 */
function stringToHex(str) {
let hex = '';
for(let i = 0; i < str.length; i++) {
    hex += str.charCodeAt(i).toString(16).padStart(2, '0');
  }
return hex;
}

/*
 * -------------------- ※ AES 加密、解密 ※ --------------------
 */

// 秘钥 Key
const AES_KEY = 't123456__t123456';
const AES = {
encryptData: function (data) {
    // AES 加密 并转为 base64
    let utf8Data = CryptoJS.enc.Utf8.parse(object2string(data));
    const key = CryptoJS.enc.Utf8.parse(AES_KEY);
    const encrypted = CryptoJS.AES.encrypt(utf8Data, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    });
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
  },

decryptData: function (data) {
    //  第一步：Base64 解码
    let words = CryptoJS.enc.Base64.parse(data);

    // 第二步：AES 解密
    const key = CryptoJS.enc.Utf8.parse(AES_KEY);
    return CryptoJS.AES.decrypt({ ciphertext: words }, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    }).toString(CryptoJS.enc.Utf8);
  },
};

/*
 * -------------------- ※ 国密SM4算法 加密、解密 ※ --------------------
 */

// 秘钥 Key
const SM4_KEY = 't123456__t123456';
const SM4 = {
encryptData: function (data) {
    // 第一步：SM4 加密
    let encryptData = CryptoSM.sm4.encrypt(object2string(data), stringToHex(SM4_KEY));
    // 第二步： Base64 编码
    return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(encryptData));
  },

decryptData: function (data) {
    // 第一步：Base64 解码
    let words = CryptoJS.enc.Base64.parse(data);
    let decode64Str = CryptoJS.enc.Utf8.stringify(words);

    // 第二步：SM4 解密
    return CryptoSM.sm4.decrypt(decode64Str, stringToHex(SM4_KEY));
  },
};


/*
 * -------------------- ※ 对外暴露： 加密、解密 ※ --------------------
 */

// 默认使用 SM4 算法
const EncryptObject = SM4;
// const EncryptObject = AES;

/**
 * 加密
 */
exportconst encryptData = function (data) {
 return !data ? null : EncryptObject.encryptData(data);
};

/**
 * 解密
 */
export const decryptData = function (data) {
 return !data ? null : EncryptObject.decryptData(data);
};

2、axios.js

import axios from 'axios';
import { decryptData, encryptData } from './encrypt';

// token的消息头
const TOKEN_HEADER = 'token';
// 加密数据类型
const DATA_TYPE_ENCRYPT = 2;

// 创建axios对象
const tAxios = axios.create({
// baseURL: import.meta.env.VITE_API_URL,
baseURL: window.VITE_API_URL, // 后端地址
});

// ================================= 请求拦截器 =================================
tAxios.interceptors.request.use(
(config) => {
    // 在发送请求之前消息头加入 token，根据业务自己修改
    const token = localStorage.getItem(TOKEN_HEADER) || '';
    if (token) {
      config.headers[TOKEN_HEADER] = token;
    } else {
      delete config.headers[TOKEN_HEADER];
    }
    return config;
  },
(error) => {
    return Promise.reject(error);
  }
);

// ================================= 响应拦截器 ================================= 
tAxios.interceptors.response.use(
(response) => {
    // 根据content-type ，判断是否为 json 数据
    let contentType = response.headers['content-type'] ? response.headers['content-type'] : response.headers['Content-Type'];
    if (contentType.indexOf('application/json') === -1) {
      return Promise.resolve(response);
    }

    // 如果是json数据
    if (response.data && response.data instanceof Blob) {
      return Promise.reject(response.data);
    }

    // 如果是加密数据
    if (response.data.dataType === DATA_TYPE_ENCRYPT) {
      response.data.encryptData = response.data.data;
      let decryptStr = decryptData(response.data.data);
      if (decryptStr) {
        response.data.data = JSON.parse(decryptStr);
      }
    }

    return Promise.resolve(response.data);
  },
(error) => {
    // 对响应错误处理
    return Promise.reject(error);
  }
);

// ================================= 对外提供请求方法 =================================

/**
 * get请求
 */
export const getRequest = (url, params) => {
return request({ url, method: 'get', params });
};

/**
 * post请求
 */
export const postRequest = (url, data) => {
return request({
    data,
    url,
    method: 'post',
  });
};

// ================================= 加密 =================================

/**
 * post 请求加密参数
 */
export const postEncryptRequest = (url, data) => {
return request({
    data: { encryptData: encryptData(data) },
    url,
    method: 'post',
  });
};

使用方法

修改秘钥

后端：在 ApiEncryptService 对应的实现类中找到 KEY 进行修改。

前端: 在 encrypt.js 文件，找到 KEY 进行修改，要和后端保持一致。

参数加密

后端：在需要解密的 controller 方法上加上注解 @ApiDecrypt。

前端:

  • o 使用 axios.js 中的 postEncryptRequest 方法进行请求加密；
  • o 使用 encrypt.js 中的 encryptData 方法直接进行加密。

后端返回加密

后端：在需要解密的 controller 方法上加上注解 @ApiEncrypt。

前端: 不需要任何操作，因为在 axios.js 已经对加密过的数据进行解密了。

演示

后端

TestController.java

package com.demo.controller;

import com.demo.domain.ResponseDto;
import com.demo.annotation.ApiDecrypt;
import com.demo.annotation.ApiEncrypt;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * 数据加解密测试
 */
@RestController
@RequestMapping("/test")
public class TestController {

    /**
     * 测试请求加密
     */
    @ApiDecrypt
    @PostMapping("/testRequestEncrypt")
    public ResponseDto<Test> testRequestEncrypt(@RequestBody Test test) {
        return ResponseDto.ok(test);
    }

    /**
     * 测试返回加密
     */
    @ApiEncrypt
    @PostMapping("/testResponseEncrypt")
    public ResponseDto<Test> testResponseEncrypt(@RequestBody Test test) {
        return ResponseDto.ok(test);
    }

    /**
     * 测试请求参数加密和解密、返回数据加密和解密
     */
    @ApiDecrypt
    @ApiEncrypt
    @PostMapping("/testDecryptAndEncrypt")
    public ResponseDto<JweForm> testDecryptAndEncrypt(@RequestBody Test test) {
        return ResponseDto.ok(test);
    }

    @Data
    public static class Test {

        // 姓名
        private String name;

        // 年龄
        private Integer age;
    }
}

前端

Encrypt.vue

<script setup>
import { reactive, ref } from 'vue';
import { encryptApi } from './encryptApi';
import { encryptData } from './encrypt';

// ---------------------------- 请求参数加密 ----------------------------
const requestEncryptForm = reactive({
    age: 25, 
    name: '张三',
  });

// 参数字符串
const requestEncryptFormStr = ref('');
// 参数字符串 加密
const requestEncryptFormEncryptStr = ref('');
// 返回结果
const requestEncryptResponse = ref('');

async function testRequestEncrypt() {
    // 参数加密
    requestEncryptFormStr.value = JSON.stringify(requestEncryptForm);
    requestEncryptFormEncryptStr.value = encryptData(requestEncryptForm);

    // 发送请求
    const result = await encryptApi.testRequestEncrypt(requestEncryptForm);
    requestEncryptResponse.value = JSON.stringify(result.data);
  }

// ---------------------------- 返回结果解密 ----------------------------
const responseEncryptForm = reactive({
    age: 25,
    name: '张三',
});

const responseEncryptFormStr = ref('');
const responseEncryptStr = ref('');
const responseStr = ref('');

async function testResponseEncrypt() {
    responseEncryptFormStr.value = JSON.stringify(responseEncryptForm);
    const result = await encryptApi.testResponseEncrypt(responseEncryptForm);
    responseEncryptStr.value = result.encryptData;
    responseStr.value = JSON.stringify(result.data);
  }

// ---------------------------- 请求加密、返回解密 ----------------------------
const form = reactive({
    age: 25,
    name: '张三',
});

const formStr = ref('');
const formEncryptStr = ref('');
const responseEncrypt = ref('');
const responseDecryptStr = ref('');

async function testBoth() {
    formStr.value = JSON.stringify(form);
    formEncryptStr.value = encryptData(form);
    const result = await encryptApi.testDecryptAndEncrypt(form);
    responseEncrypt.value = result.encryptData;
    responseDecryptStr.value = JSON.stringify(result.data);
  }
</script>
<template>
  <el-card title="请求加密">
    <el-form>
      <el-row>
        <el-form-item label="姓名">
          <el-input v-model:value="requestEncryptForm.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model:value="requestEncryptForm.age" placeholder="年龄" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testRequestEncrypt">请求加密</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <div v-if="requestEncryptFormStr">请求参数：{{ requestEncryptFormStr }}</div>
      </el-row>
      <el-row>
        <div v-if="requestEncryptFormEncryptStr">请求参数加密：{{ requestEncryptFormEncryptStr }}</div>
      </el-row>
      <el-row>
        <div v-if="requestEncryptResponse">返回结果（不加密）：{{ requestEncryptResponse }}</div>
      </el-row>
    </el-form>
</el-card>
<br />
<el-card title="返回加密">
    <el-form>
      <el-row>
        <el-form-item label="姓名">
          <el-input v-model:value="responseEncryptForm.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model:value="responseEncryptForm.age" placeholder="年龄" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testResponseEncrypt">返回加密</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <div v-if="responseEncryptFormStr">请求参数： {{ responseEncryptFormStr }}</div>
      </el-row>
      <el-row>
        <div v-if="responseEncryptStr">返回结果：{{ responseEncryptStr }}</div>
      </el-row>
      <el-row>
        <div v-if="responseStr">返回结果 解密：{{ responseStr }}</div>
      </el-row>
    </el-form>
</el-card>
<br />
<el-card title="请求和返回都加密">
    <el-form>
      <el-row>
        <el-form-item label="姓名">
          <el-input v-model:value="form.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model:value="form.age" placeholder="年龄" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testBoth">请求和返回都加密</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <div v-if="formStr">请求参数： {{ formStr }}</div>
      </el-row>
      <el-row>
        <div v-if="formEncryptStr">请求参数加密： {{ formEncryptStr }}</div>
      </el-row>
      <el-row>
        <div v-if="responseEncrypt">返回结果：{{ responseEncrypt }}</div>
      </el-row>
      <el-row>
        <div v-if="responseDecryptStr">返回结果 解密：{{ responseDecryptStr }}</div>
      </el-row>
    </el-form>
</el-card>
</template>

encryptApi.js

import { postRequest, postEncryptRequest } from './axios';

exportconst encryptApi = {

/**
   * 请求加密 
   */
testRequestEncrypt: (param) => {
    return postEncryptRequest('/test/testRequestEncrypt', param);
  },

/**
   * 返回加密 
   */
testResponseEncrypt: (param) => {
    return postRequest('/test/testResponseEncrypt', param);
  },

/**
   * 请求参数加密和解密、返回数据加密和解密
   */
testDecryptAndEncrypt: (param) => {
    return postEncryptRequest('/test/testDecryptAndEncrypt', param);
  },
}

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法，你知道几种

Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...

解锁Shell编程:变量_shell $变量

引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...

一周热门
最近发表
标签列表