前端vue2使用国密SM4进行加密、解密具体方法
作者：hibiscusxin
SM4是一种对称加密算法,类似于AES,主要用于数据的批量加密,如文件加密、数据库加密、网络通信数据加密等,这篇文章主要给大家介绍了关于前端vue2使用国密SM4进行加密、解密的相关资料,需要的朋友可以参考下
SM4是一种对称加密算法，也被称为国标SM4。它是在中国的国家密码标准下开发的，主要用于保护电子数据的机密性和完整性。
SM4算法采用分组密码工作方式，其分组长度为128位，密钥长度为128位、192位或256位。它是一种分组长度和密钥长度都可变的分组密码，其使用的密钥长度取决于实际应用场景的安全需求。
SM4加密有两种模式：ECB和CBC。
ECB模式是最简单的块密码加密模式，加密前根据加密块大小分成若干块，之后将每块使用相同的密钥单独加密，解密同理。这种模式的优点在于简单和有利于并行计算，而且误差不会被传送。然而，ECB模式不能隐藏明文的模式，可能对明文进行主动攻击。
CBC模式则是一种循环模式（链式），前一个分组的密文和当前分组的明文操作后再加密，这样做的目的是增强破解难度。这种模式不容易主动攻击，安全性好于ECB，适合传输长度长的报文，是SSL、IPSec的标准。然而，CBC模式不利于并行计算，误差传递，还需要初始化向量IV。
这里是在vue2的项目里使用，具体使用方法如下：
1、安装gm-crypt依赖
npm install gm-crypt
2、在utils文件下新建sm4Util.js
// sm4Utils.js
const SM4 = require("gm-crypt").sm4;
const pwdKey = "pwdKeyketihuan"; //"pwdKeyketihuan"; 密钥 前后端一致即可,后端提供
let sm4Config = {
key: pwdKey, //这里这个key值要与后端的一致，后端解密是根据这个key
mode: "cbc", // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的
iv: 'woshiiv', //iv是cbc模式的第二个参数，也需要跟后端配置的一致, ecb不用iv。 iv是initialization vector的意思，就是加密的初始话矢量，初始化加密函数的变量，也叫初始向量。（本来应该动态生成的，由于项目没有严格的加密要求，直接写死了）
cipherType: "base64"
};
const sm4Util = new SM4(sm4Config); // new一个sm4函数，将上面的sm4Config作为参数传递进去。
/*
* 加密工具函数
* @param {String} text 待加密文本
*/
export function encrypt(text) {
try {
return sm4Util.encrypt(text, pwdKey);
} catch {
return text;
}
}
/*
* 解密工具函数
* @param {String} text 待解密密文
*/
export function decrypt(text) {
try {
return sm4Util.decrypt(text, pwdKey);
} catch {
return text;
}
}3、可以直接在使用的文件里面引用使用
方法一
import { encrypt, decrypt } from "@/utils/sm4Util.js" //引入sm4.js
let passWord = '1q2w3e4r';
// 加密
let passSm4en = encrypt(passWord);
// 解密
let passSm4de = decrypt(passSm4en);
4、或者在utils下面新建propFormat.js
// propFormat.js
import { encrypt, decrypt } from "@/utils/sm4Util.js" //引入sm4.js
let propFormat = {
// sm4加密
encryptFormat: function(str) {
if (str) {
return encrypt(str);
} else {
return '';
}
},
// sm4解密
decryptFormat: function(str) {
if (str) {
return decrypt(str);
} else {
return '';
}
}
}
export default propFormat;
方法二
let passWord = '1q2w3e4r'; // 加密 let passSm4en = this.$util.propFormat.encryptFormat(passWord); // 解密 let passSm4de = this.$util.propFormat.decryptFormat(passSm4en);
方法三
这种一般用在div展示的时候，直接解密展示
在propFormat.js同级的index.js里面引入工具类，并导出
// index.js
// 引入所有的工具类
...
import propFormat from './propFormat.js'
...
// 导出在一个对象上
export default {
...
propFormat,
...
}
在main里面注入全局
// main.js
...
import vueFilter from './utils/propFormat.js'
...
for (let i in vueFilter) {
Vue.filter(i, vueFilter[i])
}
// 使用
// 解密
<div class='password'>{{ password | decryptFormat }}</div>总结
到此这篇关于前端vue2使用国密SM4进行加密、解密的文章就介绍到这了,更多相关vue2国密SM4加密解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！