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

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

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

背景

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

  • 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);
  },
}

相关推荐

DevExpress使用教程:GridView经验小结

下面是笔者自己总结的使用DevExpressGridview的一些经验小结，分享给大家：1、去除GridView头上的"Dragacolumnheaderheretogroup...

ComponentOne 新版本发布，新增 .NET 6 和 Blazor 平台控件支持

ComponentOneEnterprise是葡萄城推出的一款内置300多种开发控件的.NET控件集，可满足WinForm、WPF、Blazor、ASP.NETMVC等平台下的系统开发...

Wijmo5 Flexgrid基础教程:数据绑定

WijmoEnterprise下载>FlexGrid在JavaScript程序中启动添加Wijmo引用；添加wijmo控件的扩展；在JavaScript中初始化wijmo控件；（可选）添加cs...

Wijmo5 Flexgrid基础教程:InlineEdit

WijmoEnterprise下载>对于flexgrid，可以直接在单元格内进行编辑。但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。本文主要介绍给flexgrid添加编辑按钮...

WinForms Data Grid控件升级（winform devexpress控件）

告诉大家一个好消息：慧都将于近期隆重推出“DevExpress14.2新版发布会”。心动不如行动，赶快报名吧！我们期待与您相约DevExpress14.2新版发布会。>>新增Wind...

XAML控件宽度为另一控件的一半、静态属性绑定

控件上当某些数据需要根据其他数据的变化而变化很多时候，想让某个控件的宽度或者高度是另一个已有控件的一半，一开始打算使用ObjectDataProvider来实现，因为在控件上当某些数据需要根据其他数据...

用 CSS Grid 布局制作一个响应式柱状图

最新一段时间比较喜欢玩弄图表，出于好奇，我想找出比较好的用CSS制作图表的方案。开始学习网上开源图表库，它对我学习新的和不熟悉的前端技术很有帮助，比如这个：CSSGrid。今天和大家分享我学到的...

Grid 移动端双列瀑布流（移动端瀑布流布局）

预览图：原理合理使用Grid的属性：display:设置为grid指明当前容器为Grid布局grid-template-columns:定义每一列的列宽（百分比或绝对单位）grid-templa...

DevExpress导出GridControl控件数据

前言：使用C#做桌面应用时，我们会常常使用Winform作为我们的开发界面，但是windows自带的控件由于长时间不更新，已经不能够满足当前开发需要所以使用DevExpress控件作为Winform...

css grid 布局的那些事儿（css grid布局和flex布局）

CSSGrid是一种为Web开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。接下来我们将了解下CSSGrid及其工作原理。了解下它如何使用。CSS...

Grid.js - 跨框架的前端表格插件（前端table框架）

只想简简单单画个表格，但React，Vue，Angular，…，这么多前端框架，各自都有不同的表格渲染库。就没有表格库能“一次画表，到处运行”吗？来看看Grid.js这个跨框架的前端表格插件吧！...

WPF开发教程01-布局控件（wpf tablecontrol控件）

布局控件是用于进行控件布局的容器类控件，其内部控件按照一定规律自动排列，且在父控件改变大小时，会自动适应。常用布局控件如下：1.一维布局控件（StackPanel）其内部控件按照某个维度自动排列，排...

wxPython - 高级控件之表格Grid（wxpython grid刷新数据）

实战wxPython系列-043wx.grid.Grid及其相关类用于显示和编辑表格数据。它们提供了一组丰富的功能，用于显示、编辑和与各种数据源交互。wx.grid.Grid是一个功能强大的但是又稍微...

前端 BFC、IFC、GFC 和 FFC，这些你都知道吗?

如果觉得我的文章不错，可以关注我，想要看其他的进阶知识可以查看我发布过的文章！编辑搜图请点击输入图片描述BFC（Blockformattingcontexts）：块级格式上下文页面上的一个隔离的...

20多个好用的 Vue 组件库，请查收

在本文中，我们将探讨一些最常见的vuejs组件。你可以收藏一波。VueTables-2地址：https://github.com/matfish2/vue-tables-2VueTables2...

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