前端vue+element使用SM4国密加密解密的方法是什么

这篇文章主要讲解了“前端Vue+element使用SM4国密加密解密的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“前端vue+element使用SM4国密加密解密的方法是什么”吧！

项目环境：

vue2+element进行开发，看懂了下文，其他框架使用该功能，也是同理了。

国密扩展了解概述

1.SM算法

国密即国家密码局认定的国产密码算法。主要有SM1，SM2，SM3，SM4。密钥长度和分组长度均为128位。

SM1 为对称加密。其加密强度与AES相当。该算法不公开，调用该算法时，需要通过加密芯片的接口进行调用。

SM2为非对称加密，基于ECC。该算法已公开。由于该算法基于ECC，故其签名速度与秘钥生成速度都快于RSA。ECC 256位（SM2采用的就是ECC 256位的一种）安全强度比RSA 2048位高，但运算速度快于RSA。

SM3 消息摘要。可以用MD5作为对比理解。该算法已公开。校验结果为256位。

SM4 无线局域网标准的分组数据算法。对称加密，密钥长度和分组长度均为128位。

2.sm4加密有两种模式：ecb和cbc。两种模式的区别如下（下面文字来自百度）：

ECB：是一种基础的加密方式，密文被分割成分组长度相等的块（不足补齐），然后单独一个个加密，一个个输出组成密文。

CBC：是一种循环模式（链式），前一个分组的密文和当前分组的明文操作后再加密，这样做的目的是增强破解难度。（不容易主动攻击，安全性好于ECB，是SSL、IPSec的标准）

一、优bai点不同:

ECB模式：1、简单；2、有利于并行计算；3、误差不会bai被传送；
CBC模式：1、不容易主动攻击,安全性好于baiECB,适合传输长度长的报文,是SSL、IPSec的标准。

二、缺点不同:

ECB模式：1、不能隐藏明文的模式；2、可能对明文进行主动攻击；

CBC模式：1、不利于并行计算；2、误差传递；3、需要初始化向量IV

方案一，代码直接使用

安装加密gm-crypt依赖

npm install gm-crypt

在表单提交方法内，直接添加下面提供的代码，适合使用次数频率少的情况下使用。
代码例子：

checkPassword() {  this.$refs.fORMPass.validate(valid => {      if (valid) {          // 引用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作为参数传递进去。          accountCenterService.checkVerificationCode({              newPassWord: sm4.encrypt(this.formPass.newPassword) //加密处理明文密码          }).then(res => {              if (res.code === STATUSCODE.code01) {                  this.dialogVisible = false;              }else{                  this.$message.error(res.msg)              }          });      }  });},

方案二，封装版，作为公共方法调用

将处理的函数代码封装，然后把加密和解密的方法导出去，作为公共方法调用，方便多处使用，然后在代码中引入调用即可。便于维护后后期使用。
1、同样也是先安装加密gm-crypt依赖

npm install gm-crypt

在项目的utils目录下，新建一个sm4Util.js作为公共文件使用，

const SM4 = require("gm-crypt").sm4;const pwdKey = "GJstSK_YBD=gSOFT"; //"GJstSK_YBD=gSOFT"; 密钥  前后端一致即可,后端提供let sm4Config = {      key: pwdKey, //这里这个key值要与后端的一致，后端解密是根据这个key      mode: "ecb",  // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，不过要是cbc的话下面还要加一个iv的参数，ecb不用      iv: '1234567891011121', //iv是cbc模式的第二个参数，也需要跟后端配置的一致 iv是initialization vector的意思，就是加密的初始话矢量，初始化加密函数的变量，也叫初始向量。（本来应该动态生成的，由于项目没有严格的加密要求，直接写死一个）      cipherType: "base64"    };const sm4Util = new SM4(sm4Config); // new一个sm4函数，将上面的sm4Config作为参数传递进去。    export function encrypt(text) {  return sm4Util.encrypt(text, pwdKey);} export function decrypt(text) {  return sm4Util.decrypt(text, pwdKey);}

引入sm4Util.js

import {encrypt,decrypt} from "./sm4Util.js" //引入sm4.js  相对路径

在组件中调用对应的方法，将需要进行加密的数据，放入加密方法处理，
例子：

// SM4加密传输开始-----------------------const user = 'admin'; // 用户名const pass = '123456'; // 密码// 开始加密  用户名密码const usernameSM4 = encrypt(user); //加密后的用户名const passwordSM4 = encrypt(pass); //加密后的密码

感谢各位的阅读，以上就是“前端vue+element使用SM4国密加密解密的方法是什么”的内容了，经过本文的学习后，相信大家对前端vue+element使用SM4国密加密解密的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！