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 rsaPassWord = encryptor.encrypt(this.loginForm.password) // 对需要加密的数据进行加密

        this.loginForm.password = rsaPassWord

前端部分修改结束。

2.2 后端部分的修改

先安装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加入下面这句代码:
在这里插入图片描述

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

重新编译,运行,再打开面板,可以看到密码不再是明文显示了:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_47505105/article/details/123620957