前端使用js进行RSA加密并在vue中使用

目录

前言

生成秘钥

vue中的安装

进行验证

加密操作

---

前言

前后端网络请求通信的时候携带的数据并不能全部明文传输,否则容易出现这样的的情况

 任何人都可以在请求里看到所有的内容,非常不安全

那么我们就需要对数据进行加密,加密方法有很多,这里就简单介绍下RSA加密在vue中的使用

原理什么的这里就不做赘述了,看到感兴趣的话可以自己了解一下,这里主要说明一下使用步骤

生成秘钥

1.在项目文件夹右键打开git bash here

生成私钥

$ openssl genrsa -out private.pem 1024//输入本行
Generating RSA private key, 1024 bit long modulus (2 primes)
..........+++++
............+++++
e is 65537 (0x010001)

提取公钥

$ openssl rsa -in private.pem -pubout -out public.pem//输入本行
writing RSA key

此时已经在项目文件内内生成public.pem和private.pem两个文件,可以直接打开查看公钥私钥或者

$ cat private.pem//输入本行查看私钥
-----BEGIN RSA PRIVATE KEY-----
MIICXwIBAAKBgQDIuKMKAi4wWhQtjvF2gjo7+eHDuP3IFYOzYc+o+mpo3PX5+ZOa
uPXdJ0HopK9/QOWpQ2FF3ZMJZx4+Puc4CfCIHXtU2+X08zZumMhfs80qfmMKFvy3
SnIM8SCUopAStzsVLY9f0Egmr7jShcdIxyUlRY4vPXuAEB1vRI3daSH0SQIDAQAB
AoGBAL15leZ3wnRARDXxbryJGEHPk6+3rFE5BfbKiUWhBdvxYX1UfGKc4PKgAVaE
R2pfr6xFf8h87jT9E458wLWkpFmcjhTXi01cJGrhhkmmMpg9knkEuWH3SmuSB7Wb
67dvC1+WeO1LBk5TeUSdbQX3k+jvyR4xm0Or5cCZqvU42kWBAkEA8GRR1+OFroU2
ARL2ze6I2JmBKKVF02jQjLazD7pJTBg1y4REDmqYvqmaxPmOv1NlRRGzR5IHGsiH
EitkKTTT+QJBANXA7jpJoUug6Kd2IlzsnLCFw4MxjnyGkcuhu9pLKj/rV3HdeZ3X
X/ooExufa5y18+CuWQQWSD6fd+WZ2XB1ltECQQCZKKGIdhqnHZJRzt5WSEMCFZNX
7Sz2zBILhR/CxoKKq+YiW4vsz3ewCmlkVEfhmGWuQt/BmsVSCC8eoWy4YEMpAkEA
itQspdTOmrUehi028k2HEys9qYbVOVGZfb1EqenpvewXNlAXPgn1Px8qEeW/2d9f
Tw1NqVbjgzDFiW0cCWuGEQJBALpvGJz3DCU+2HjSgf+aDGbcIw/f8f8QUVEvuxgv
kCb/K4eu9KmzlgaLTrQJaloqOI3cJsUdsF0xvdWccfD4aTo=
-----END RSA PRIVATE KEY-----

$ cat public.pem//输入本行查看公钥
-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDIuKMKAi4wWhQtjvF2gjo7+eHD
uP3IFYOzYc+o+mpo3PX5+ZOauPXdJ0HopK9/QOWpQ2FF3ZMJZx4+Puc4CfCIHXtU
2+X08zZumMhfs80qfmMKFvy3SnIM8SCUopAStzsVLY9f0Egmr7jShcdIxyUlRY4v
PXuAEB1vRI3daSH0SQIDAQAB
-----END PUBLIC KEY-----

vue中的安装

安装

npm install jsencrypt

在main.js引入

import JSEncrypt from 'jsencrypt'

进行验证

这里可以通过在线工具验证啊,百度一下很多,不过我们还是写一遍代码验证了解下

我这里用的是一个vue3的项目举例,因为要加密的内容分布在多个页面,所以直接就在main里写了一个Mixin方便使用,各位可以按需写在vuex里或者其他合适的地方

app.mixin({
	data() {
		return {
			encrypt: null,
			decrypt: null,
            publicKey:
'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDIuKMKAi4wWhQtjvF2gjo7+eHDuP3IFYOzYc+o+mpo3PX5+ZOauPXdJ0HopK9/QOWpQ2FF3ZMJZx4+Puc4CfCIHXtU2+X08zZumMhfs80qfmMKFvy3SnIM8SCUopAStzsVLY9f0Egmr7jShcdIxyUlRY4vPXuAEB1vRI3daSH0SQIDAQAB',	
            privateKey:
'MIICXwIBAAKBgQDIuKMKAi4wWhQtjvF2gjo7+eHDuP3IFYOzYc+o+mpo3PX5+ZOauPXdJ0HopK9/QOWpQ2FF3ZMJZx4+Puc4CfCIHXtU2+X08zZumMhfs80qfmMKFvy3SnIM8SCUopAStzsVLY9f0Egmr7jShcdIxyUlRY4vPXuAEB1vRI3daSH0SQIDAQABAoGBAL15leZ3wnRARDXxbryJGEHPk6+3rFE5BfbKiUWhBdvxYX1UfGKc4PKgAVaER2pfr6xFf8h87jT9E458wLWkpFmcjhTXi01cJGrhhkmmMpg9knkEuWH3SmuSB7Wb67dvC1+WeO1LBk5TeUSdbQX3k+jvyR4xm0Or5cCZqvU42kWBAkEA8GRR1+OFroU2ARL2ze6I2JmBKKVF02jQjLazD7pJTBg1y4REDmqYvqmaxPmOv1NlRRGzR5IHGsiHEitkKTTT+QJBANXA7jpJoUug6Kd2IlzsnLCFw4MxjnyGkcuhu9pLKj/rV3HdeZ3XX/ooExufa5y18+CuWQQWSD6fd+WZ2XB1ltECQQCZKKGIdhqnHZJRzt5WSEMCFZNX7Sz2zBILhR/CxoKKq+YiW4vsz3ewCmlkVEfhmGWuQt/BmsVSCC8eoWy4YEMpAkEAitQspdTOmrUehi028k2HEys9qYbVOVGZfb1EqenpvewXNlAXPgn1Px8qEeW/2d9fTw1NqVbjgzDFiW0cCWuGEQJBALpvGJz3DCU+2HjSgf+aDGbcIw/f8f8QUVEvuxgvkCb/K4eu9KmzlgaLTrQJaloqOI3cJsUdsF0xvdWccfD4aTo='
		}
	},
	methods: {
		rsa(val) {
			this.encrypt = new JSEncrypt()
			this.encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + this.publicKey +
				'-----END PUBLIC KEY-----');
			this.decrypt = new JSEncrypt()
			this.decrypt.setPrivateKey('-----BEGIN  PRIVATE KEY-----' + this.privateKey + '-----END PRIVATE KEY-----');
			console.log('加密算法', this.encrypt);
			console.log('解密算法', this.decrypt);
			let afterRsa = this.encrypt.encrypt(val);
			let afterDeRsa = this.decrypt.decrypt(afterRsa);
			console.log('加密结果', afterRsa);
			console.log('解密结果', afterDeRsa);
		}
	}
})

验证结果

 那么到这里 证明秘钥已经没有问题了 我们在前端就不需要保留私钥了,只留下公钥进行加密即可,私钥发给后端让后端去处理就行了

加密操作

把我们进行验证的代码做个简单的修改

app.mixin({
	data() {
		return {
			encrypt: null,
            publicKey:
'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDIuKMKAi4wWhQtjvF2gjo7+eHDuP3IFYOzYc+o+mpo3PX5+ZOauPXdJ0HopK9/QOWpQ2FF3ZMJZx4+Puc4CfCIHXtU2+X08zZumMhfs80qfmMKFvy3SnIM8SCUopAStzsVLY9f0Egmr7jShcdIxyUlRY4vPXuAEB1vRI3daSH0SQIDAQAB',	
		}
	},
	methods: {
		rsa(val) {
			this.encrypt = new JSEncrypt()
			this.encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + this.publicKey +
				'-----END PUBLIC KEY-----');
			return this.encrypt.encrypt(val);
		}
	}
})

然后在需要加密的地方

userInfo.password = this.rsa(userInfo.password)

再查看请求,加密就完成了