VUE + Springboot + SM4前端加密 后端解密 One'_

前端比较简单，只需在使用时引入 npm 包

const SM4 = require("gm-crypt").sm4;

下面是前端加解密操作

const sm4Config = {
  //配置sm4参数
  key: "16位Key值",//这里这个key值是跟后端要的
  mode: "cbc", // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，cbc还要加一个iv的参数，ecb不用
  cipherType: "base64", // 
  iv: "16位iv值"// 这里key 和 iv 需要和后端保持一直
};
let sm4 = new SM4(sm4Config);//这里new一个函数，将上面的sm4Config作为参数传递进去。然后就可以开心的加密了
// let pwd = sm4.encrypt('123456'); //密码加密
// let pwd1 = sm4.decrypt('加密后的密文'); //密码解密

有想要细心研究的同学可以打开我们项目的 node_modules 文件夹，搜索 gm-crypt 就可以找到了，如图所示

 如果想要在其他项目使用，就把文件拷出来就行了，这里就不细说了。

后端的稍后补充。

  /**
   * 和前端key一致
   */
  private static String secretKey = "XXXXXXXXXXXXXXXX";

  /**
   * 和前端iv一致
   */
  private static String iv = "XXXXXXXXXXXXXXXX";

  /**
   * cbc加密
   */
  public static String encrypt(String plainTxt) {
    String cipherTxt = "";
    SymmetricCrypto sm4 = new SM4(
        Mode.CBC, Padding.PKCS5Padding, secretKey.getBytes(CharsetUtil.CHARSET_UTF_8),
        iv.getBytes(CharsetUtil.CHARSET_UTF_8));
    byte[] encrypHex = sm4.encrypt(plainTxt);
    cipherTxt = Base64.encode(encrypHex);
    return cipherTxt;
  }

  /**
   * cbc解密
   */
  public static String decrypt(String cipherTxt) {
    String plainTxt = "";
    try {
      SymmetricCrypto sm4 = new SM4(
          Mode.CBC, Padding.PKCS5Padding, secretKey.getBytes(CharsetUtil.CHARSET_UTF_8),
          iv.getBytes(CharsetUtil.CHARSET_UTF_8));
      byte[] cipherHex = Base64.decode(cipherTxt.trim());
      plainTxt = sm4.decryptStr(cipherHex, CharsetUtil.CHARSET_UTF_8);

    } catch (Exception e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
    return plainTxt;
  }

 工具类：hutool