3.1 Vue实战--电商后台管理系统 的登录功能 补充了 加密功能

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');//解密 用在登录接口

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