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

1、安装包

npm install gm-crypto

2、引入包

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

3、SM2加密解密

1.  
   let SM2Data = reactive({
2.  
   publicKey: publicKey,
3.  
   privateKey: privateKey,
4.  
   originalData: 'SM2 椭圆曲线公钥密码算法',
5.  
   encryptedData: '',
6.  
   decryptedData: ''
7.  
   })
8.  
    
9.  
   //加密
10.  
    const encryptSM2 = () => {
11.  
    SM2Data.encryptedData = SM2.encrypt(SM2Data.originalData, SM2Data.publicKey, {
12.  
    inputEncoding: 'utf8',
13.  
    outputEncoding: 'base64'
14.  
    })
15.  
    }
16.  
     
17.  
    //解密
18.  
    const decryptedSM2 = () => {
19.  
    SM2Data.decryptedData = SM2.decrypt(SM2Data.encryptedData, SM2Data.privateKey, {
20.  
    inputEncoding: 'base64',
21.  
    outputEncoding: 'utf8'
22.  
    })
23.  
    }

4、SM3加密

1.  
   let SM3Data = reactive({
2.  
   originalData: 'SM3水电费水电费',
3.  
   encryptedData: ''
4.  
   })
5.  
    
6.  
   //加密
7.  
   const encryptSM3 = () => {
8.  
   // SM3Data.encryptedData = SM3.digest(SM3Data.originalData)
9.  
   // SM3Data.encryptedData = SM3.digest(SM3Data.originalData, 'base64')
10.  
    SM3Data.encryptedData = SM3.digest(SM3Data.originalData, 'utf8', 'base64')
11.  
    }

5、SM4加密解密

1.  
   let SM4Data = reactive({
2.  
   key: '0123456789abcdeffedcba9876543210',
3.  
   iv: '0123456789abcdeffedcba9876543210',
4.  
   originalData: 'SM4 国标对称加密',
5.  
   encryptedData: '',
6.  
   decryptedData: ''
7.  
   })
8.  
    
9.  
    
10.  
    //加密
11.  
    const encryptSM4 = () => {
12.  
    // ECB
13.  
    SM4Data.encryptedData = SM4.encrypt(SM4Data.originalData, SM4Data.key, {
14.  
    inputEncoding: 'utf8',
15.  
    outputEncoding: 'base64'
16.  
    })
17.  
    //CBC
18.  
    // SM4Data.encryptedData = SM4.encrypt(SM4Data.originalData, SM4Data.key, {
19.  
    // iv: SM4Data.iv,
20.  
    // mode: SM2Data.constants.CBC,
21.  
    // inputEncoding: 'utf8',
22.  
    // outputEncoding: 'hex'
23.  
    // })
24.  
    }
25.  
    //解密
26.  
    const decryptedSM4 = () => {
27.  
    // ECB
28.  
    SM4Data.decryptedData = SM4.decrypt(SM4Data.encryptedData, SM4Data.key, {
29.  
    inputEncoding: 'base64',
30.  
    outputEncoding: 'utf8'
31.  
    })
32.  
    //CBC
33.  
    // SM4Data.decryptedData = SM4.decrypt(SM4Data.encryptedData, SM4Data.key, {
34.  
    // iv: SM4Data.iv,
35.  
    // mode: SM2Data.constants.CBC,
36.  
    // inputEncoding: 'utf8',
37.  
    // outputEncoding: 'hex'
38.  
    // })
39.  
    }

6、vue3 element完整代码

1.  
   <template>
2.  
   <div class="container">
3.  
    
4.  
   <el-row :gutter="24">
5.  
   <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
6.  
   相关文档：
7.  
   <a href="https://gitcode.net/mirrors/byte-fe/gm-crypto?utm_source=csdn_github_accelerator"
8.  
   target="_blank">gm-crypto</a>
9.  
   </el-col>
10.  
    </el-row>
11.  
     
12.  
    <el-tabs v-model="activeName" @tab-click="handleClick">
13.  
    <el-tab-pane label="SM2" name="SM2">
14.  
    <el-row :gutter="24">SM2 公钥： {{ SM2Data.publicKey }} </el-row>
15.  
    <el-row :gutter="24">SM2 私钥： {{ SM2Data.privateKey }} </el-row>
16.  
    <el-row :gutter="24">
17.  
    <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
18.  
    <el-input v-model="SM2Data.originalData" placeholder="请输入需要加密的数据" clearable />
19.  
    </el-col>
20.  
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
21.  
    <el-button type="cyan" size="mini" @click="encryptSM2">加密</el-button>
22.  
    </el-col>
23.  
    </el-row>
24.  
    <el-row :gutter="24">SM2 加密数据： </el-row>
25.  
    <el-row :gutter="24">
26.  
    <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
27.  
    <el-input v-model="SM2Data.encryptedData" placeholder="请输入需要解密的数据" type="textarea" />
28.  
    </el-col>
29.  
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
30.  
    <el-button type="cyan" size="mini" @click="decryptedSM2">解密</el-button>
31.  
    </el-col>
32.  
    </el-row>
33.  
    <el-row :gutter="24">SM2 解密数据： {{ SM2Data.decryptedData }} </el-row>
34.  
    </el-tab-pane>
35.  
     
36.  
    <el-tab-pane label="SM3" name="SM3">
37.  
    <el-row :gutter="24">
38.  
    <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
39.  
    <el-input v-model="SM3Data.originalData" placeholder="请输入需要加密的数据" clearable />
40.  
    </el-col>
41.  
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
42.  
    <el-button type="cyan" size="mini" @click="encryptSM3">加密</el-button>
43.  
    </el-col>
44.  
    </el-row>
45.  
    <el-row :gutter="24">SM3 加密数据： {{ SM3Data.encryptedData }} </el-row>
46.  
    </el-tab-pane>
47.  
     
48.  
    <el-tab-pane label="SM4" name="SM4">
49.  
    <el-row :gutter="24">SM4 秘钥： {{ SM4Data.key }} </el-row>
50.  
    <el-row :gutter="24">
51.  
    <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
52.  
    <el-input v-model="SM4Data.originalData" placeholder="请输入需要加密的数据" clearable />
53.  
    </el-col>
54.  
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
55.  
    <el-button type="cyan" size="mini" @click="encryptSM4">加密</el-button>
56.  
    </el-col>
57.  
    </el-row>
58.  
    <el-row :gutter="24">SM4 加密数据： {{ SM4Data.encryptedData }} </el-row>
59.  
    <el-row :gutter="24">
60.  
    <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
61.  
    <el-input v-model="SM4Data.encryptedData" placeholder="请输入需要解密的数据" clearable />
62.  
    </el-col>
63.  
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
64.  
    <el-button type="cyan" size="mini" @click="decryptedSM4">解密</el-button>
65.  
    </el-col>
66.  
    </el-row>
67.  
    <el-row :gutter="24">SM4 解密数据： {{ SM4Data.decryptedData }} </el-row>
68.  
    </el-tab-pane>
69.  
    </el-tabs>
70.  
     
71.  
     
72.  
    </div>
73.  
    </template>
74.  
     
75.  
    <script lang="ts" setup name="DemoGuomi">
76.  
    // 该加密方式需要安装gm-crypto
77.  
    import { SM4, SM3, SM2 } from 'gm-crypto';
78.  
    import { reactive, ref } from 'vue';
79.  
     
80.  
     
81.  
    const { publicKey, privateKey } = SM2.generateKeyPair()
82.  
    let activeName = ref('SM2')
83.  
    let SM2Data = reactive({
84.  
    publicKey: publicKey,
85.  
    privateKey: privateKey,
86.  
    originalData: 'SM2 椭圆曲线公钥密码算法',
87.  
    encryptedData: '',
88.  
    decryptedData: ''
89.  
    })
90.  
     
91.  
    let SM3Data = reactive({
92.  
    originalData: 'SM3水电费水电费',
93.  
    encryptedData: ''
94.  
    })
95.  
     
96.  
    let SM4Data = reactive({
97.  
    key: '0123456789abcdeffedcba9876543210',
98.  
    iv: '0123456789abcdeffedcba9876543210',
99.  
    originalData: 'SM4 国标对称加密',
100.  
     encryptedData: '',
101.  
     decryptedData: ''
102.  
     })
103.  
      
104.  
      
105.  
     const handleClick = (tab: string, event: HTMLElement) => {
106.  
     console.log(tab, event);
107.  
     }
108.  
      
109.  
     //加密
110.  
     const encryptSM2 = () => {
111.  
     SM2Data.encryptedData = SM2.encrypt(SM2Data.originalData, SM2Data.publicKey, {
112.  
     inputEncoding: 'utf8',
113.  
     outputEncoding: 'base64'
114.  
     })
115.  
     }
116.  
      
117.  
     //解密
118.  
     const decryptedSM2 = () => {
119.  
     SM2Data.decryptedData = SM2.decrypt(SM2Data.encryptedData, SM2Data.privateKey, {
120.  
     inputEncoding: 'base64',
121.  
     outputEncoding: 'utf8'
122.  
     })
123.  
     }
124.  
      
125.  
     //加密
126.  
     const encryptSM3 = () => {
127.  
     // SM3Data.encryptedData = SM3.digest(SM3Data.originalData)
128.  
     // SM3Data.encryptedData = SM3.digest(SM3Data.originalData, 'base64')
129.  
     SM3Data.encryptedData = SM3.digest(SM3Data.originalData, 'utf8', 'base64')
130.  
     }
131.  
      
132.  
     //加密
133.  
     const encryptSM4 = () => {
134.  
     // ECB
135.  
     SM4Data.encryptedData = SM4.encrypt(SM4Data.originalData, SM4Data.key, {
136.  
     inputEncoding: 'utf8',
137.  
     outputEncoding: 'base64'
138.  
     })
139.  
     //CBC
140.  
     // SM4Data.encryptedData = SM4.encrypt(SM4Data.originalData, SM4Data.key, {
141.  
     // iv: SM4Data.iv,
142.  
     // mode: SM2Data.constants.CBC,
143.  
     // inputEncoding: 'utf8',
144.  
     // outputEncoding: 'hex'
145.  
     // })
146.  
     }
147.  
     //解密
148.  
     const decryptedSM4 = () => {
149.  
     // ECB
150.  
     SM4Data.decryptedData = SM4.decrypt(SM4Data.encryptedData, SM4Data.key, {
151.  
     inputEncoding: 'base64',
152.  
     outputEncoding: 'utf8'
153.  
     })
154.  
     //CBC
155.  
     // SM4Data.decryptedData = SM4.decrypt(SM4Data.encryptedData, SM4Data.key, {
156.  
     // iv: SM4Data.iv,
157.  
     // mode: SM2Data.constants.CBC,
158.  
     // inputEncoding: 'utf8',
159.  
     // outputEncoding: 'hex'
160.  
     // })
161.  
     }
162.  
     </script>

gm-crypto相关文档：https://gitcode.net/mirrors/byte-fe/gm-crypto?utm_source=csdn_github_accelerator

vue3 element ui例子：https://gitee.com/huanglgln/vue-sys-manage-el

 vue3 view ui例子：https://gitee.com/huanglgln/vue-sys-manage

 vue3 Ant Design Vue ui例子：https://gitee.com/huanglgln/vue-sys-manage-adv 

这篇好文章是转载于：学新通技术网