前端vue+element使用SM4国密加密解密

在Vue项目中使用SM4国密算法进行加密和解密，你需要引入sm-crypto库。以下是一个简单的例子：

1. 安装sm-crypto库：

npm install sm-crypto

2. 在Vue组件中使用sm-crypto进行加密和解密：

<template>
  <div>
    <el-input v-model="plaintext" placeholder="请输入明文"></el-input>
    <el-button @click="encrypt">加密</el-button>
    <el-input v-model="ciphertext" placeholder="显示加密结果"></el-input>
    <el-button @click="decrypt">解密</el-button>
    <el-input v-model="decryptedtext" placeholder="显示解密结果"></el-input>
  </div>
</template>
 
<script>
import { SM4 } from 'sm-crypto';
 
export default {
  data() {
    return {
      plaintext: '',
      ciphertext: '',
      decryptedtext: ''
    };
  },
  methods: {
    encrypt() {
      const sm4 = new SM4();
      this.ciphertext = sm4.encryptHex(this.plaintext, '密钥'); // 密钥需要替换为实际的密钥
    },
    decrypt() {
      const sm4 = new SM4();
      this.decryptedtext = sm4.decryptHex(this.ciphertext, '密钥'); // 密钥需要替换为实际的密钥
    }
  }
};
</script>

在这个例子中，我们定义了一个Vue组件，其中包含了加密和解密的逻辑。用户可以在输入框中输入明文，然后使用按钮进行加密，加密结果会显示在另一个输入框中。解密过程类似。

注意：在实际应用中，密钥应该是动态的，并且应该安全地管理和存储。上述代码中的密钥是硬编码的，仅用于演示目的。