Skip to content

安全与加密

模块内置了一套基于 Web Crypto API 的安全工具,涵盖了从数据加密到安全存储的常见场景。

对称加密 (Symmetric Crypto)

使用 useSymmetricCrypto 进行 AES-GCM 加密。适用于对敏感文本数据进行加密。

typescript
const { encrypt, decrypt, generateKey } = useSymmetricCrypto()

// 1. 准备密钥(可以是用户密码或随机生成的 Key)
const password = 'my-secret-password'

// 2. 加密
const encryptedData = await encrypt('敏感信息', password)
// 输出: base64字符串 (包含密文+IV)

// 3. 解密
const originalData = await decrypt(encryptedData, password)

非对称加密 (Asymmetric Crypto)

使用 useAsymmetricCrypto 进行 RSA-OAEP 加解密及签名。

typescript
const { 
  generateKeyPair, 
  encrypt, 
  decrypt, 
  sign, 
  verify 
} = useAsymmetricCrypto()

// 生成密钥对
const { publicKey, privateKey } = await generateKeyPair()
// 导出为 PEM 格式字符串以便传输或存储
const pubPem = await exportPublicKey(publicKey)
const privPem = await exportPrivateKey(privateKey)

// 加密 (使用公钥)
const secret = await encrypt('Hello', pubPem)

// 解密 (使用私钥)
const message = await decrypt(secret, privPem)

哈希工具 (Hash)

typescript
const { sha256, sha512, md5, generateSalt, hashWithSalt } = useHash()

const hash = await sha256('password')
const salt = generateSalt() // 生成随机盐值
const saltedHash = await hashWithSalt('password', salt)

加密存储 (Encrypted Storage)

useEncryption 提供了对 localStorage and cookie 的封装,在写入时自动加密,读取时自动解密。

注意: 加密存储依赖于客户端的密钥。虽然这能防止直接查看 Storage 中的明文,但如果攻击者获取了前端代码中的密钥,依然可以解密。建议结合非对称加密或动态密钥使用。

typescript
const { setEncryptedItem, getEncryptedItem } = useEncryption()
const key = 'storage-key'

// LocalStorage
await setEncryptedItem('token', 'xyz-123', key)
const token = await getEncryptedItem('token', key)

场景实战:安全登录

结合非对称加密(传输密码)和加密存储(保存 Token)的完整流程。

vue
<script setup lang="ts">
import { ref } from 'vue'

const { post } = useApiClient()
const { encrypt } = useAsymmetricCrypto()
const { setEncryptedCookie } = useEncryption()

const username = ref('')
const password = ref('')

// 后端提供的公钥
const SERVER_PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
...
-----END PUBLIC KEY-----`

const login = async () => {
  // 1. 前端使用公钥加密密码
  const encryptedPassword = await encrypt(password.value, SERVER_PUBLIC_KEY)

  // 2. 发送请求
  const res = await post('/login', {
    body: { username: username.value, password: encryptedPassword }
  })

  // 3. 加密存储 Token
  await setEncryptedCookie('token', res.token, 'local-secret', { secure: true })
}
</script>

Released under the MIT License.