vue2使用SM4实现加密解密

由于项目涉及加密相关功能，因此就需要对前端的用户输入密码铭文，进行加密处理，采用的方法是SM4国密加密算法来处理，
项目环境：
vue2+element进行开发，看懂了下文，其他框架使用该功能，也是同理了。
一、安装加密gm-crypt依赖（两种方法任选）

npm install gm-crypt

yarn add gm-crypt

二、封装作为公共方法调用

将处理的函数代码封装，然后把加密和解密的方法导出去，作为公共方法调用，方便多处使用，然后在代码中引入调用即可。便于维护后后期使用。

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

// sm4.js
const SM4 = require("gm-crypt").sm4;
const pwdKey = "后端提供的key"; //密钥
let sm4Config = {
    key: pwdKey, //这里这个key值要与后端的一致，后端解密是根据这个key
    mode: "ecb",  // 加密的方式
    cipherType: "base64"
};

const sm4Util = new SM4(sm4Config); // new一个sm4函数，将上面的sm4Config作为参数传递进去。

/* 
 * 加密工具函数
 * @param {String} text 待加密文本
 */
export function encrypt(text) {
    return sm4Util.encrypt(JSON.stringify(text), pwdKey);
}

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

2、引入sm4.js

import { encrypt, decrypt } from "@/utils/sm4" 

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

例如：

let sm4encrypt = encrypt('params');//加密params字段
console.log(sm4encrypt,'加密');//打印加密后的密文

let sm4decrypt = decrypt(jiaencrypt);//解密加密的密文
console.log(sm4decrypt,'解密');//打印解密后的文字

以上就是所有步骤