Vue 前端部分

第一步：安装依赖

npm install gm-crypt 

• 数据提交表单（用的是elementUI）

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">信息管理服务系统</h3>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
          @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
        </el-button>
      </el-form-item>
    </el-form>

• 定义data部分

 export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          username: "",
          password: ""
        }
      }
}

第二步 配置SM4然后快乐加密

  handleLogin() {
        // 引用sm4包进行加密
        const SM4 = require("gm-crypt").sm4;
        let sm4Config = {
          //配置sm4参数
          key: "GJwsXX_BzW=gJWJW", //这里这个key值要与后端的一致，后端解密是根据这个key
          mode: "cbc", // 加密的方式有两种，ecb和cbc两种，这里使用的是cbc，cbc模式还要加一个iv的参数，ecb不用
          iv: "ZkR_SiNoSOFT=568", //iv是cbc模式的第二个参数，也需要跟后端配置的一致
          cipherType: "base64" //
        };
        let sm4 = new SM4(sm4Config); //new一个sm4函数，将上面的sm4Config作为参数传递进去。
        //将new出来的对象，直接调用依赖提供的加密方法就完事了
            this.loginForm.password = sm4.encrypt(this.loginForm.password); //密码加密
            this.$store.dispatch("Login", this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || "/"
              }).catch(() => {});
            }).catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
                this.getCode();
              }
            });
        });
      }

后端部分

• 后端部分是用到了hutool的加密解密（Hutool-crypto）-国密算法工具
  Hutool官网
• 需要注意的是，并不是直接使用hutool的SmUtil，而是new SM4里面的方法（多参数构造），有兴趣的可以进源码看看

1. 引入pom文件

          <!--hutool 工具包-->
            <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-all</artifactId>
                <version>5.4.2</version>
            </dependency>

            <!--SM4加密所需要的依赖-->
            <dependency>
                <groupId>org.bouncycastle</groupId>
                <artifactId>bcprov-jdk15on</artifactId>
                <version>1.69</version>
            </dependency>

2. 创建自己的sm4Utils 工具类：

package com.ruoyi.common.utils.sm4;


import cn.hutool.core.codec.Base64;
import cn.hutool.core.util.CharsetUtil;
import cn.hutool.crypto.Mode;
import cn.hutool.crypto.Padding;
import cn.hutool.crypto.SmUtil;
import cn.hutool.crypto.symmetric.SM4;
import cn.hutool.crypto.symmetric.SymmetricCrypto;

import java.io.UnsupportedEncodingException;


/**
 * sm4加密解密
 * CBC模式
 *
 * @author wwl
 */

public class SM4Utils {
    /**
     * 和前端key一致(上面提到的需要一致的地方)
     */
    private static String secretKey = "GJwsXX_BzW=gJWJW";

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


    /**
     * cbc解密
     *
     * @param cipherTxt
     * @return
     */
    public static String decrypt(String cipherTxt) {
        String plainTxt = "";
        try {
          //这里是new的SM4类的方法，SmUtil里的方法满足不了需求
            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) {
            e.printStackTrace();
        }
        return plainTxt;
    }


    /**
     * cbc加密
     *
     * @param plainTxt
     * @return
     */
    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;
    }

    //这是一个粗糙的测试方法
    public static void main(String[] args) throws UnsupportedEncodingException {
        String content = "123456";
        String encrypt = encrypt(content);
        String decrypt = decrypt(encrypt);
        System.out.println("加密：" + encrypt);
        System.out.println("解密：" + decrypt);
    }
}

最后 就可以前端加密传输，后端解密验证啦！
祝您用餐愉快！！！