vue中SM4的使用

sm4加密有两种模式：ecb和cbc。

第一种：npm引用

npm install gm-crypt 

export default {
  components: {},
  props: {},
  data() {
    return {
      Account: "", //用户账号
      Pwd: "", //用户密码
      time: ""
    };
  },
  computed: {},
  created() {},
  watch: {},
  methods: {
    // 登录
    login() {
      // 引用sm4包进行加密
      const SM4 = require("gm-crypt").sm4;
      let sm4Config = {
        //配置sm4参数
        key: "HENG1AN2WEN3YIN4",//这里这个key值是跟后端要的
        mode: "ecb", // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，不过要是cbc的话下面还要加一个iv的参数，ecb不用
        cipherType: "base64" // 
      };

      let sm4 = new SM4(sm4Config);//这里new一个函数，将上面的sm4Config作为参数传递进去。然后就可以开心的加密了
      let Account = sm4.encrypt(this.Account); //账号加密
      let Pwd = sm4.encrypt(this.Pwd); //密码加密

第二种：直接引用js

1.在index.html中全局引用

<script src="./sm4.js" type="text/javascript"></script>    //此处引入的sm4的包

相关js文件可从这里下载：链接: https://pan.baidu.com/s/1RfDe079I6n46spyw-mzDKg 提取码: vei2

2.定义封装加密解密的方法

 * 加密工具函数
 * @param {String} text 待加密文本
 */
export function encrypt(text) {
  const s4 = new SM4Util();
  s4.secretKey = "22HDESaAhiHHugDz";    //key就是自定义加密key，自己定义的简单串；
  s4.iv = "1234567891011121"   //iv是initialization vector的意思，就是加密的初始话矢量，
  								初始化加密函数的变量，也叫初始向量。 
  								（本来应该动态生成的，由于项目没有严格的加密要求，直接写死一个）
  return s4.encryptData_CBC(text);
}

/**
 * 解密工具函数
 * @param {String} text 待解密密文
 */
export function decrypt(text) {
  const s4 = new SM4Util();
  s4.iv = "1234567890111111"
  s4.secretKey = "11HDESaAhiHHugDz";
  return s4.decryptData_CBC(text);
}

3.组件中调用

submit() {
  let username = document.getElementById("username").value;
  let password = document.getElementById("pwd").value;
  let use = encrypt(username);
  let pwd = encrypt(password);
    let params = {
    use,
    pwd,
  };
  this.$server.toLogin(params).then((res) => {
    console.log(res, "登录成功");  
  });
},