前端vue使用SM4国密封装加密解密函数

本文详细介绍了如何在项目中安装和使用GM-crypt库实现SM4加密,包括创建sm4Util.js文件、设置加密/解密配置,以及在前端页面中的导入和使用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

步骤一 :

        安装加密gm-crypt依赖

npm install gm-crypt

步骤二:

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

步骤三:

        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作为参数传递进去。
    
/* 
 * 加密工具函数
 * @param {String} text 待加密文本
 */
export function encrypt(text) {
  return sm4Util.encrypt(text, pwdKey);
}

/*
 * 解密工具函数
 * @param {String} text 待解密密文
 */
 export function decrypt(text) {
  return sm4Util.decrypt(text, pwdKey);
}

步骤四:

        在需要使用页面引入  sm4Util.js文件 注意路径

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

步骤五:

        加密例子:

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

        解密例子:

const usernameSM4 = decrypt(user); //加密后的用户名
const passwordSM4 = decrypt(pass); //加密后的密码

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值