使用AES加解密在vue3前端加密、Golang后端解密实战教程(后端框架可以为Gin、Goframe等框架使用)

说明

在安全数据验证或传输时使用对称加密算法把敏感数据加密后再传输，然后再另个端接收数据后进行解密。本将用vue3+ts/js前端对数据进行加密，然后在Go语言写的后端进行解密获取元数据，我们使用加密算法是AES加密算法。

vue前端解密

导入crypto-js库

首先，需要在前端使用Vue的crypto-js库来进行AES加解密，可以使用以下命令进行安装：

复制代码

npm install crypto-js

注意如果使用TypeScript引入方式如下（使用yarn或npm都可以）,ts多引了：@types/crypto-js

bash 复制代码

npm install crypto-js
npm install --save @types/crypto-js

yarm

bash 复制代码

yarn add crypto-js
yarn add @types/crypto-js

引入

然后在需要加解密的组件中引入该库：

复制代码

import CryptoJS from 'crypto-js'

加密解密代码

对于加密，可以使用以下代码：

复制代码

const key = CryptoJS.enc.Utf8.parse('1234567890123456') // 加密密钥，必须为16位
const iv = CryptoJS.enc.Utf8.parse('1234567890123456') // 偏移量，必须为16位
const encrypted = CryptoJS.AES.encrypt(data, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
})
const encryptedStr = encrypted.toString()

其中，data为需要加密的字符串，encryptedStr为加密后的字符串。

对于解密，可以使用以下代码：

复制代码

const key = CryptoJS.enc.Utf8.parse('1234567890123456') // 加密密钥，必须为16位
const iv = CryptoJS.enc.Utf8.parse('1234567890123456') // 偏移量，必须为16位
const decrypted = CryptoJS.AES.decrypt(data, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
})
const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8)

其中，data为需要解密的字符串，decryptedStr为解密后的字符串。

实战代码

新建CryptoJS.ts文件，代码如下

TypeScript 复制代码

import CryptoJS from 'crypto-js'
const aesKey= CryptoJS.enc.Utf8.parse('1234567890123456') 
const aesIv=  CryptoJS.enc.Utf8.parse('1234567890123456')
/* 加密 */
function Encrypt (word: any) {
  const srcs = CryptoJS.enc.Utf8.parse(word)
  const encrypted = CryptoJS.AES.encrypt(srcs, aesKey, { iv: aesIv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
}
/* 解密 */
function Decrypt (word: any) {
  const decrypt = CryptoJS.AES.decrypt(word, aesKey, { iv: aesIv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}
export { Encrypt,Decrypt };

Go后端加密解密

AES加密

要进行AES加密，首先需要一个密钥，该密钥的长度可以是16、24或32字节，对应于AES-128、AES-192或AES-256加密。以下是一个加密函数的示例，它接受一个密钥和要加密的明文字符串，并返回加密后的十六进制字符串：

Go 复制代码

import (
   "crypto/aes"
   "encoding/hex"
)
func EncryptAES(key string, plainText string) (string, error) {
   cipher, err := aes.NewCipher([]byte(key))
   if err != nil {
       return "", err
   }
   out := make([]byte, len(plainText))
   cipher.Encrypt(out, []byte(plainText))
   return hex.EncodeToString(out), nil
}

AES解密

解密过程与加密类似，但是使用的是Decrypt方法。以下是一个解密函数的示例，它接受一个密钥和加密的十六进制字符串，并返回解密后的原始字符串：

Go 复制代码

func DecryptAES(key string, encryptText string) (string, error) {
   decodeText, _ := hex.DecodeString(encryptText)
   cipher, err := aes.NewCipher([]byte(key))
   if err != nil {
       return "", err
   }
   out := make([]byte, len(decodeText))
   cipher.Decrypt(out, decodeText)
   return string(out[:]), nil
}

实战代码

新建cryptojs.go文件，代码如下：

Go 复制代码

package cryptojs

import (
	"bytes"
	"crypto/aes"
	"crypto/cipher"
	"encoding/base64"
)

var (
	key_16 = "1234567890123456" // 加密密钥，必须为16位
	iv     = "1234567890123456" // 偏移量，必须为16位
)

// AES加密
func AesEncrypt(content string) (string, error) {
	block, err := aes.NewCipher([]byte(key_16))
	if err != nil {
		return "", err
	}
	paddedPlaintext := PKCS7Padding([]byte(content), block.BlockSize())
	ciphertext := make([]byte, len(paddedPlaintext))
	mode := cipher.NewCBCEncrypter(block, []byte(iv))
	mode.CryptBlocks(ciphertext, paddedPlaintext)
	return base64.StdEncoding.EncodeToString(ciphertext), nil
}

// 解密函数
func AesDecrypt(crypted string) (string, error) {
	cryptedBytes, err := base64.StdEncoding.DecodeString(crypted)
	if err != nil {
		return "", err
	}
	block, err := aes.NewCipher([]byte(key_16))
	if err != nil {
		return "", err
	}
	blockMode := cipher.NewCBCDecrypter(block, []byte(iv))
	origData := make([]byte, len(cryptedBytes))
	blockMode.CryptBlocks(origData, cryptedBytes)
	origData = PKCS7UnPadding(origData)
	return string(origData), nil
}

// PKCS7 Padding
func PKCS7Padding(ciphertext []byte, blockSize int) []byte {
	padding := blockSize - len(ciphertext)%blockSize
	padtext := bytes.Repeat([]byte{byte(padding)}, padding)
	return append(ciphertext, padtext...)
}

// PKCS7 UnPadding
func PKCS7UnPadding(origData []byte) []byte {
	length := len(origData)
	unpadding := int(origData[length-1])
	return origData[:(length - unpadding)]
}

总结

上面实战代码都是项目框架实际使用代码直接复制过来，放心使用，保证你可以实现前端vue3到后端Golang两个种语言开发之间加密与解密。可以到：https://goflys.cn/goframepro 框架中实际体验，目前在我们开发GoframePro框架动态token中使用，可以使用GoframePro框架具体感受。