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

在Vue项目中使用SM4国密算法进行加密和解密，你可以使用sm-crypto库。首先需要安装这个库：

npm install sm-crypto

然后在Vue组件中引入并使用：

// 引入sm-crypto库
import sm from 'sm-crypto'
 
export default {
  data() {
    return {
      // 示例数据
      secretData: '这是需要加密的数据',
      encryptedData: '',
      decryptedData: ''
    }
  },
  methods: {
    // 加密方法
    encryptData() {
      const key = '1234567812345678' // 密钥应该是16字节
      const sm4 = new sm.sm4(key)
      this.encryptedData = sm4.encryptHex(this.secretData)
    },
    // 解密方法
    decryptData() {
      const key = '1234567812345678' // 密钥应该是16字节
      const sm4 = new sm.sm4(key)
      this.decryptedData = sm4.decryptHex(this.encryptedData)
    }
  }
}

在上述代码中，secretData是需要加密的数据，encryptedData是加密后的数据，decryptedData是解密后的数据。encryptData方法负责加密，decryptData负责解密。密钥key应该是一个16字节的字符串。

请确保你的项目中已经正确安装并配置了sm-crypto库。在实际应用中，密钥管理很重要，不应直接写在代码中，而应该从安全的地方（例如环境变量或者服务器）获取。