vue——前后端实现SM4加解密

参考：

1.VUE + Springboot + SM4前端加密 后端解密

https://www.cnblogs.com/caoxwen/p/16179683.html

2.解决vue项目中出现webpack＜5的问题！

https://blog.csdn.net/FantasyWeirdo/article/details/123552064

 

前端

1.引入gm-crypt

npm install gm-crypt

 

2.封装js

sm4Util.js

const SM4 = require('gm-crypt').sm4;
const pwdKey = 'xxx'; // 密钥 前后端一致即可,后端提供
let sm4Config = {
  key: pwdKey, // key值要与后端的一致，后端解密是根据这个key
  mode: 'cbc', // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，cbc的话下面还要加一个iv的参数，ecb不用
  iv: pwdKey, // iv是cbc模式的第二个参数，也需要跟后端配置的一致 iv是initialization vector的意思，就是加密的初始化矢量，初始化加密函数的变量，也叫初始向量
  cipherType: 'base64',
};

/*
 * 加密工具函数
 * @param {String} text 待加密文本
 * @param key string 加密key(16位)
 * @param iv string 偏移向量(16位)
 */
export function SM4Encrypt(text, key = pwdKey, iv = pwdKey) {
  sm4Config.key = key;
  sm4Config.iv = iv;
  const sm4Util = new SM4(sm4Config); // new一个sm4函数，将sm4Config作为参数传递进去
  return sm4Util.encrypt(text, key);
}

/*
 * 解密工具函数
 * @param {String} text 待解密密文
 * @param key string 加密key(16位)
 * @param iv string 偏移向量(16位)
 */
export function SM4Decrypt(text, key = pwdKey, iv = pwdKey) {
  sm4Config.key = key;
  sm4Config.iv = iv;
  const sm4Util = new SM4(sm4Config); // new一个sm4函数，将sm4Config作为参数传递进去
  return sm4Util.decrypt(text, key);
}

 

3.使用

import { SM4Encrypt, SM4Decrypt } from '@/util/sm4Util.js';

...

const key = 'xxx'; // 密钥，由后端定义，可以从接口获取
const iv = 'xxx'; // 偏移向量，由后端定义，可以从接口获取
const enPw = SM4Encrypt(this.form.password, key, iv); // 加密
const dePw = SM4Decrypt (enPw, key, iv); // 解密

 

后端

　/**
   * 和前端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;
  }

 

出现的问题

安装gm-crypt后使用，启动报错：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

原因：由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入，如果打包过程中有使用到nodejs核心模块，webpack会提示进行相应配置

解决方法：

1.安装依赖

npm install node-polyfill-webpack-plugin

2.vue.config.js中修改配置

// 头部引入
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

configureWebpack: (config) => {
    const plugins = []
    plugins.push(new NodePolyfillPlugin())
}
// 或者
configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
}