vue中使用国密算法SM2、SM3、SM4

最新推荐文章于 2025-04-14 08:36:55 发布

原创

最新推荐文章于 2025-04-14 08:36:55 发布 · 9.9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文提供了一个Vue3应用的例子，展示了如何使用gm-crypto库进行SM2、SM3和SM4加密解密操作。包括SM2的公钥私钥加密解密，SM3的哈希加密，以及SM4的对称加密解密。代码示例中结合了ElementUI组件，实现了用户输入数据的实时加密解密展示。

1、安装包

npm install gm-crypto

2、引入包

import { SM4, SM3, SM2 } from 'gm-crypto';

3、SM2加密解密

let SM2Data = reactive({
  publicKey: publicKey,
  privateKey: privateKey,
  originalData: 'SM2 椭圆曲线公钥密码算法',
  encryptedData: '',
  decryptedData: ''
})

//加密
const encryptSM2 = () => {
  SM2Data.encryptedData = SM2.encrypt(SM2Data.originalData, SM2Data.publicKey, {
    inputEncoding: 'utf8',
    outputEncoding: 'base64'
  })
}

//解密
const decryptedSM2 = () => {
  SM2Data.decryptedData = SM2.decrypt(SM2Data.encryptedData, SM2Data.privateKey, {
    inputEncoding: 'base64',
    outputEncoding: 'utf8'
  })
}

4、SM3加密

let SM3Data = reactive({
  originalData: 'SM3水电费水电费',
  encryptedData: ''
})

//加密
const encryptSM3 = () => {
  // SM3Data.encryptedData = SM3.digest(SM3Data.originalData)
  // SM3Data.encryptedData = SM3.digest(SM3Data.originalData, 'base64')
  SM3Data.encryptedData = SM3.digest(SM3Data.originalData, 'utf8', 'base64')
}

5、SM4加密解密

let SM4Data = reactive({
  key: '0123456789abcdeffedcba9876543210',
  iv: '0123456789abcdeffedcba9876543210',
  originalData: 'SM4 国标对称加密',
  encryptedData: '',
  decryptedData: ''
})


//加密
const encryptSM4 = () => {
  // ECB
  SM4Data.encryptedData = SM4.encrypt(SM4Data.originalData, SM4Data.key, {
    inputEncoding: 'utf8',
    outputEncoding: 'base64'
  })
  //CBC
  // SM4Data.encryptedData = SM4.encrypt(SM4Data.originalData, SM4Data.key, {
  //   iv: SM4Data.iv,
  //   mode: SM2Data.constants.CBC,
  //   inputEncoding: 'utf8',
  //   outputEncoding: 'hex'

最低0.47元/天解锁文章