1. 原来功能的不足

当登录成功之后，打开调试面板，找到“网络”，在请求体中会看到密码和用户名，这是不安全的。这是因为：http协议是明文传输，只要别人一抓包就可以获取到传输的报文。下面进行密码和用户名的加密。

2. 进行前端加密后端解密

2.1 前端加密

先生成一对公钥私钥，生成公钥私钥对的网址： /netrsakeypair。

安装 jsencrypt ：

npm install jsencrypt

再到src/components/Login.vue中去修改代码:

import JSEncrypt from 'jsencrypt/bin/jsencrypt'import { publicKey } from '../config/key.js'

const encryptor = new JSEncrypt() // 新建JSEncrypt对象this.$refs.loginFormRef.validate(async (valid) => {// console.log(valid)if (!valid) returnencryptor.setPublicKey(publicKey) // 设置公钥const rsaUsername = encryptor.encrypt(this.loginForm.username) // 对用户名加密const rsaPassWord = encryptor.encrypt(this.loginForm.password) // 对需要加密的数据进行加密const { data: res } = await this.$http.post('login', {username: rsaUsername,password: rsaPassWord})if (res.meta.status !== 200) return this.$message.error('登录失败')this.$message.success('登录成功!')

前端部分修改结束。

2.2 后端部分的修改

找到后台的文件夹 vue_api_server:

先安装node-rsa：

npm i node-rsa

先找到module/passport.js, 登录功能写在这个文件下:

加入下列代码：

var NodeRSA = require("node-rsa");const _priKey = `-----BEGIN PRIVATE KEY-----MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBANb9zLX9ppDz61VzLuLpTcE+TINiPZfcmCh2mMFEfETRxOf4Fef8tq9Mt1gvLPmRnDQeX+ECxFGCiy8L2HAp1dV9g+VFjn2I7smiTdS8I5NoyYrCMvWAR5bDxl7wd2alTIuQup5zwPyMcpr7RfNLk6TgntRxc3lvFqfHJPp3/WgHAgMBAAECgYEAiCfKGsPeVlS0CLTez8QTgzvSNy7jdSa2koGxckzOKsNy4boDHZ21kMWUI9wUrqWh+Hv4GsemzzxOq2fkFfzYt6gGOsfz8KZ6sBmuKKibWGf4qQ6vlINZnbCIxNg7dLFqPLR4YISnoo+PWasmX7Py8zKzkv5ZsIu9KFLb0ufCaSkCQQDvDU4M9VQHyIb1VnWluI9pPW2KCCMTQHkwIHdkC1eRh9XG/JKvOAcvWssKaaoCr1yQ6kk0inkePwkzvCqPmH67AkEA5jvOK4lM967D+ldl2vDN3D9yUof/68WWUbqCW4CcZDksGNInS4TsXQm95xpBom8JDIza6m2paDCRGUolii1VJQJAOyY3oc0yNZrQifQSuCaqlYe1iunog+L4GYhvAjosOL47jzj/sotSe80jYDg08OUjKlhONMnuniVKyZpNjapV8QJADNcTBXyPzVRy25haNt6tLHZhYtbw3+5SFtbHBGFk13YUzoGR7XVJVVsAu03MkUmOAKQuZVqeUxA6V2W6OD2U/QJALnDPo2VIze9w7MsvwGBEcjcl42IC6CWQZMw2rhGP1KsSCFek6iKDQiZwd3FJ2RM9Ua2OSl/db+Ndk8WlFTA2ug==-----END PRIVATE KEY-----`const privateKey = new NodeRSA(_priKey);privateKey.setOptions({encryptionScheme: 'pkcs1'});

再找到module.exports.setup加入下面这句代码：

username = privateKey.decrypt(username, 'utf8');//解密 用在登录接口password = privateKey.decrypt(password, 'utf8');//解密 用在登录接口

重新编译，运行，再打开面板，可以看到密码和用户名不再是明文显示了：