Vue项目登录密码加密传输：前端实现方案详解

通过引入jsencrypt库，在登录环节对密码字段进行RSA公钥加密，可有效防止敏感信息在网络传输中暴露。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

有一个vue项目，都上线了，需求又来了，要求用户登录密码不得在浏览器开发者工具的Network面板中以明文形式出现。为满足该安全规范，前端需在密码传输前进行加密，确保网络请求中传输的为密文。

一、技术选型

采用RSA非对称加密方案，前端使用公钥加密，后端使用私钥解密。

相比对称加密，非对称加密可避免密钥在前后端同时暴露的风险。

前端加密库：jsencrypt —— 专用于浏览器环境的RSA加密库，体积小、API简单。密钥对生成：使用在线工具 web.chacuo.net/netrsakeypair 生成RSA密钥对，支持选择密钥格式

二、前端实现步骤

1. 安装依赖

npm install jsencrypt

2. 封装加密工具（@/utils/jcrypt.js）

jcrypt.js 中定义方法JSEncrypt，使用jsencrypt：

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'// 密钥对生成 h t t p :/ /web.chacuo.net/netrsakeypairconst publicKey = '****' const privateKey ='****' // 加密export function encrypt(txt) { const encryptor = new JSEncrypt() encryptor.setPublicKey(publicKey) // 设置公钥 return encryptor.encrypt(txt) // 对数据进行加密}// 解密export function decrypt(txt) { const encryptor = new JSEncrypt() encryptor.setPrivateKey(privateKey) // 设置私钥 return encryptor.decrypt(txt) // 对数据进行解密}

3. 登录接口调用时加密密码

调登录接口时通过encrypt加密密码：

import { encrypt } from '@/utils/jcrypt'export async function login(data) { const requestData = { ...data, password: encrypt(data.password) } return request({ url: '/base/login', method: 'post', data: requestData })}

三、后端解密与验证

后端需用对应的私钥对password字段进行解密，再与数据库中的密码（应为哈希值）进行比对。

解密代码：

export function decrypt(txt) { const encryptor = new JSEncrypt() encryptor.setPrivateKey(privateKey) // 设置私钥 return encryptor.decrypt(txt) // 对数据进行解密}

实际业务中，解密得到明文密码后，应使用哈希算法（如BCrypt）与数据库中存储的密码摘要进行比对，完成登录验证。

四、注意事项

密钥对管理：公钥可安全置于前端代码中；私钥必须严格保存在后端，严禁提交到前端仓库或暴露在客户端。密钥格式：jsencrypt默认支持PKCS#1格式公钥，在线生成时需选择对应类型。性能与长度：RSA加密有长度限制（通常不超过密钥长度的117字节），密码字段一般符合要求；若加密长文本，需采用混合加密方案（RSA + AES）。安全性补充：仅靠前端加密不足以完全防止中间人攻击，必须配合HTTPS使用。

五、总结

通过引入jsencrypt库，在登录环节对密码字段进行RSA公钥加密，可有效防止敏感信息在网络传输中暴露。该方案实现成本低、兼容性好，适用于大多数需要提升安全等级的前端项目。上线后应验证Network面板中密码字段已为密文，并与后端完成联调确认加解密流程正确。