VUE + Springboot + SM4前端加密 後端解密

前端比較簡單，只需在使用時引入 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