Vue JS前端如何对登录注册接口传输的密码进行加密处理

注意：前端加密不能替代HTTPS，这是必须满足的前提。哪怕做了前端加密，也需要全站部署HTTPS，避免中间人攻击篡改加密逻辑、窃取加密后字符串。

1. 优先解决根源问题：部署HTTPS #

传输明文密码的问题本质上可以靠HTTPS直接解决，HTTPS的传输层会自动对所有请求数据做加密，即使被抓包也无法拿到明文内容，前端加密是额外增加的防护层，不能替代HTTPS的作用。

2. 前端加密具体实现方案 #

方案一：非对称加密（RSA，推荐使用） #

这是业内最常用的传输加密方案，逻辑为后端生成公钥+私钥对，公钥公开给前端使用，前端用公钥加密密码后传输，后端用私钥解密后再执行已有的哈希校验/存库逻辑。

实现步骤：

• 后端提前生成RSA公钥、私钥对，公钥可以直接写死在前端配置中，也可以提供一个公开接口给前端动态获取。
• Vue项目安装成熟的RSA加密库：npm install jsencrypt --save
• 封装加密工具方法：

// src/utils/encrypt.js
import JSEncrypt from 'jsencrypt'

// 替换为后端提供的RSA公钥内容
const PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
后端生成的公钥内容
-----END PUBLIC KEY-----`

export function encryptPassword(password) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(PUBLIC_KEY)
  return encryptor.encrypt(password)
}

• 登录、注册接口调用前加密密码：

// 登录接口调用示例
import { encryptPassword } from '@/utils/encrypt'

async function login(username, password) {
  const encryptedPwd = encryptPassword(password)
  // 传给后端的是加密后的密码字符串
  return request.post('/api/login', {
    username,
    password: encryptedPwd
  })
}

• 后端对应逻辑：用配对的RSA私钥解密拿到明文密码，再走原有哈希加密校验、存库逻辑即可。

方案二：加盐哈希（仅适合低安全要求场景） #

如果不想引入非对称加密逻辑，可以前后端约定一个独立的传输用盐值，前端先给密码做一次哈希再传输，注意这个盐值要和后端存库用的盐完全区分开，不要混用。

• Vue安装哈希计算库：npm install crypto-js --save
• 加密示例：

import CryptoJS from 'crypto-js'

// 替换为前后端约定好的传输专用盐值，不要泄露
const TRANSFER_SALT = '自定义的传输用盐值'

export function encryptPassword(password) {
  return CryptoJS.SHA256(password + TRANSFER_SALT).toString()
}

• 后端拿到加密后的字符串后不需要解密，直接用存库专用的盐再做一次哈希，和数据库中存储的哈希值比对即可。

3. 注意事项 #

• 不要自行实现加密算法，使用业内成熟的开源加密库即可。
• 前端加密是额外防护手段，不能替代后端的哈希存库逻辑，也不能替代HTTPS。
• 后端存库用的盐禁止放到前端代码中，传输用盐和存库用盐必须完全独立。

内容的提问来源于stack exchange，提问作者Francesco Sasso