数据安全：前端用户登录信息加密的实现（基于RSA）

前言

在开发后台管理系统，或其他有一定安全要求的系统时，通常会要求前端对传递的数据进行加密传输。而使用的加密算法多法RSA（非对称加密的一种），这里基于项目中经常用到的加密方式写一下项目总结。

一、数据加密算法

这里不讲原理不讲实现，只简单描述下不同算法的区别，了解一下。

1.1 算法分类

• 对称加密： 单密钥加密，同一个密钥可同时用作加密和解密。优点：加解密速度快。缺点：安全性低，密钥一丢失就可能数据丢失。常见算法如：DES.
• 非对称加密：加密解密用不同的密钥，也叫公私钥加密。优点：安全性较高，缺点：速度稍慢。常见算法如：RSA
• Hash算法加密： 一种单向算法，加密数据不可逆，常用在不可还原的密码存储、信息完整性校验等。常见算法如：MD5

特别说明：因为非对称加密是项目中最常用到的，所以这里多做补充。非对称加密中，通信双方各自有一对公钥和私钥，其中公钥是公开的（由信息接受方【后端开发】提供给信息发送方，用来加密发送信息），私钥是各自保存的（由信息接受方保留【后端开发】常用来解密）且每个用户的私钥 是唯一的，所以其他用户除了可以用发送者的公钥来验证信息来源是否真实，还可以确保发送者无法否认曾发送过该信息。特点：用公钥加密的数据只能用私钥解密，反之私钥加密的数据只能用公钥解密。因为加密和解密用的是不同密钥，而且无法从一个密钥推导出另一个密钥，且公钥加密的信息只能用同一方的私钥进行解密。

1.2 常见算法

• RSA算法：非对称加密，将两个大素数相乘十分容易，但那时想要对其乘积进行因式分解却极其困难，因此可以将乘积公开作为加密密钥，可用于加密，也能用于签名。
  • 数据加密：公钥加密，私钥解密
  • 数字签名：私钥加密，公钥解密
• DES：对称加密
• MD5： Hash加密

二、用户登录时进行数据加密传输

2.1 保存密钥对

通常后端 在生成密钥对后，会把相应的公钥给你（有时也会给私钥用于解密）。以下是公钥：

-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCJZitRZnq5qx4gZc2W1r9BcAkDOrr+
....省略内容。。。。。。
+prTwH8Br0GfVU1zf4TirNVrpEAPXAgW80la9kXjOI6qZG6SChk6zvvwRKgpAgPMcnYAUQ3BOTgY/YJ0mfZB9XWYe-----END PUBLIC KEY-----
1
2
3

2.2 通过jsencrypt 封装加密方法

jsencrypt : 一个基于ras加解密的js库，特点就是简单好用。官网地址

• 安装

# 安装
npm install jsencrypt --save
1
2

• 封装（新建encrypt.js)

import JSEncrypt from 'jsencrypt';
const JSE= new JSEncrypt();

// 设置公钥
jse.setPublicKey(`-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUA。。。省略。。。/YJ0mfZB9XWYeQIDAQAB-----END PUBLIC KEY-----`)

// 封装加密方法
export const encodeStr = str => {
	return JSE.encrypt(str);  // 就这样简单
}

// 解密方法
export const decodeStr = str => {
	const jse = new JSEncrypt();
	  jse.setPrivateKey(
	    `MIICdgIBADANBgkqhkiG9w0BAQEFA...省略内容。。。dTqlvEw6vRlVbtOfwhEezE0DVw==`
	  );
	  return jse.decrypt(str);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 使用（加密登录数据）

<script>
	import {encodeStr } from "@/utils/encrypt"
	export default {
		data(){
			return {
				loginForm: {
					username:'',
					password:'',
					code:'',
				}
			}
		},
		methods:{
			submit(){
				let {password, code} = this.loginForm
				let params = {
					username: this.loginForm.username,
					password: encodeStr(password),
					code: encodeStr(code)
				}
				// 如果是数据整体加密
				/*
					let params = {
						encryptJson : encodeStr(JSON.stringify(this.loginForm))
					}
				*/
				loginApi(params).then(res=>{
				//省略。。。 
				})
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33