1. 原来功能的不足
当登录成功之后,打开调试面板,找到“网络”,在请求体中会看到密码和用户名,这是不安全的。这是因为:http协议是明文传输,只要别人一抓包就可以获取到传输的报文。下面进行密码和用户名的加密。
2. 进行前端加密后端解密
2.1 前端加密
先生成一对公钥私钥,生成公钥私钥对的网址: http://web.chacuo.net/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) return
encryptor.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-----
MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBANb9zLX9ppDz61Vz
LuLpTcE+TINiPZfcmCh2mMFEfETRxOf4Fef8tq9Mt1gvLPmRnDQeX+ECxFGCiy8L
2HAp1dV9g+VFjn2I7smiTdS8I5NoyYrCMvWAR5bDxl7wd2alTIuQup5zwPyMcpr7
RfNLk6TgntRxc3lvFqfHJPp3/WgHAgMBAAECgYEAiCfKGsPeVlS0CLTez8QTgzvS
Ny7jdSa2koGxckzOKsNy4boDHZ21kMWUI9wUrqWh+Hv4GsemzzxOq2fkFfzYt6gG
Osfz8KZ6sBmuKKibWGf4qQ6vlINZnbCIxNg7dLFqPLR4YISnoo+PWasmX7Py8zKz
kv5ZsIu9KFLb0ufCaSkCQQDvDU4M9VQHyIb1VnWluI9pPW2KCCMTQHkwIHdkC1eR
h9XG/JKvOAcvWssKaaoCr1yQ6kk0inkePwkzvCqPmH67AkEA5jvOK4lM967D+ldl
2vDN3D9yUof/68WWUbqCW4CcZDksGNInS4TsXQm95xpBom8JDIza6m2paDCRGUol
ii1VJQJAOyY3oc0yNZrQifQSuCaqlYe1iunog+L4GYhvAjosOL47jzj/sotSe80j
YDg08OUjKlhONMnuniVKyZpNjapV8QJADNcTBXyPzVRy25haNt6tLHZhYtbw3+5S
FtbHBGFk13YUzoGR7XVJVVsAu03MkUmOAKQuZVqeUxA6V2W6OD2U/QJALnDPo2VI
ze9w7MsvwGBEcjcl42IC6CWQZMw2rhGP1KsSCFek6iKDQiZwd3FJ2RM9Ua2OSl/d
b+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');//解密 用在登录接口
重新编译,运行,再打开面板,可以看到密码和用户名不再是明文显示了: