3.1 Vue combat - the login function of the e-commerce background management system supplements the encryption function

1. The original function is insufficient

When the login is successful, open the debug panel, find "Network", and you will see the password in the request body, which is not secure. This is because the http protocol is transmitted in plain text, and as long as someone else captures the packet, the transmitted message can be obtained.

2. Perform front-end encryption and back-end decryption

2.1 Front-end encryption

First generate a pair of public key and private key, and generate the URL of the public key and private key pair: http://web.chacuo.net/netrsakeypair .

Install jsencrypt:

npm install jsencrypt 

src/components/Login.vueThen go to to modify the code:

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

The modification of the front-end part is over.

2.2 Modification of the back-end part

Install node-rsa first:

npm i node-rsa

First find module/passport.js, the login function is written in this file:

Add the following code:

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'});

Find and module.exports.setupadd the following code:

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

Recompile, run, and then open the panel, you can see that the password is no longer displayed in plain text: