原创vue3实现前端进行对称加密和非对称加密两种方法

Vue 12 0 2026-04-08

vue3实现前端进行对称加密和非对称加密两种方法

先安装:

npm install crypto-js jsencrypt

对称加密:

//对称加密=======================================
// 签名密钥(前后端保持一样,存在安全配置里)
const SIGN_KEY = 'm17xjmf2b4evd52exh7v40dcveqzyko5';
// 生成签名
function createSign(params) {
    // 1. 参数排序(必须和后端一致)
    let keys = Object.keys(params).sort()
    const str = keys.map(k => `${k}=${params[k]}`).join('&')
    // 2. SHA256 签名
    return CryptoJS.SHA256(str + '&secretkey=' + SIGN_KEY).toString();
}

// 使用示例
const data = {
    userid: 10001,
    username: 'test',
    timestamp: parseInt(Date.now() / 1000)
}
const sign = createSign(data)
console.log('前端签名:', sign)

axios.post(baseURL + '/set/signature', data, {
    headers: {
        'Content-Type': 'application/json',
        'X-Signature': sign
    }
}).then(res => {
    console.log('后端返回数据:', res.data)
})


非对称加密:

//非对称加密=======================================
// 公钥(前端可暴露)
const PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2kkZxmfNFrtsIKUSpbdf
/eF2ivsQeblxruQRZDpcoL3fr0sWcEwwZ/5i+tqD+f48QjzyH6yVMIG8+Krlt/X5
jIY3lDqYZy/qvMQG4yzn+3xaFwxxhp8ygstqgs3Fx+WlNx+Pq9hoFPeS0KVG/LpM
vyzEz11Y4NjVPtep4mhx837U1/c6ykuEqtvIwTsBDiOThmWyfkP9Es874tbhGaLE
UwNNcxWGt1Auw6nNdW3+gEPADcrC6RW0TWxMQxCGt229vanaDBObFIyZiNqkSBKh
eUChb6bZ+uYPF9HaEFFSmsVC8equB83B7T2nKesvEKPEqToTv4eLjV9zZZI77cG+
1QIDAQAB
-----END PUBLIC KEY-----`

// ==========================
// 签名
// ==========================
function rsaSign(params) {
    // 1. 排序拼接
    const keys = Object.keys(params).sort()
    const str = keys.map(k => `${k}=${params[k]}`).join('&')
    // 2. SHA256 哈希
    const hash = CryptoJS.SHA256(str).toString()
    // 3. 公钥加密(最稳定,不返回 false)
    const enc = new JSEncrypt()
    enc.setPublicKey(PUBLIC_KEY)
    return enc.encrypt(hash)
}

// 发送
const data = {
    userid: 10002,
    username: 'test2',
    timestamp: parseInt(Date.now() / 1000)
}
const sign = rsaSign(data)

axios.post(baseURL + '/set/signature2', data, {
    headers: {
        'Content-Type': 'application/json',
        'X-Signature': sign
    }
}).then(response => {
    console.log('后端返回数据:', response.data)
})


如需后端解密验证请点击以下链接查看:

PHP实现后端对称解密和非对称解密两种方法


上一篇:vue3封装h函数动态生成DOM元素并挂载

下一篇:没有了

讨论数量:0

请先登录再发表讨论。 2026-04-08

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链