由于项目最近要进行安全测试，前端的用户和密码都是明文数据传送给后台那里，其实这样很很不安全的，容易泄露个人信息和密码。中间服务器的同事就提出，可以通过前端接收公钥，利用公钥对密码进行加密，把加密过密码字符串传给中间服务器，中间服务器再利用私钥对传过来的密码字符串进行解密，解密后的密码用不可逆算法MD5进行加密存储在数据库里。这样进行双重加密，就不容易泄露个人信息和密码。
一、 Base64/BaseUrl 加解密
中间服务器是用base64/baseUrl 加密过的token，把公钥传送给我，所以我要用base64/baseUrl 对token 进行解密，把公钥取出来。
1、Base64 / BaseUrl
所谓Base64，就是选出64个字符作为一个基本字符集（A-Z，a-z，0-9，+，/，再加上作为垫字的"="，实际是65个字符），其它所有符号都转换成这个字符集中的字符。
2、项目引入Base64.js文件
首先要把Base64.js文件引入，Base64.js文件如下：
1 //Base64.js文件
2 var Base64=
3 {
4 _keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
5 encode:function(e){
6 var t="";
7 var n,r,i,s,o,u,a;
8 var f=0;
9 e=Base64._utf8_encode(e);
10 while(f<e.length){
11 n=e.charCodeAt(f++);
12 r=e.charCodeAt(f++);
13 i=e.charCodeAt(f++);
14 s=n>>2;
15 o=(n&3)<<4|r>>4;
16 u=(r&15)<<2|i>>6;
17 a=i&63;
18 if(isNaN(r)){
19 u=a=64
20 }else if(isNaN(i)){
21 a=64
22 }
23 t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)
24 }
25 return t
26 },
27 decode:function(e){
28 var t="";
29 var n,r,i;
30 var s,o,u,a;
31 var f=0;
32 e=e.replace(/[^A-Za-z0-9+/=]/g,"");
33 while(f<e.length){
34 s=this._keyStr.indexOf(e.charAt(f++));
35 o=this._keyStr.indexOf(e.charAt(f++));
36 u=this._keyStr.indexOf(e.charAt(f++));
37 a=this._keyStr.indexOf(e.charAt(f++));
38 n=s<<2|o>>4;
39 r=(o&15)<<4|u>>2;
40 i=(u&3)<<6|a;
41 t=t+String.fromCharCode(n);
42 if(u!=64){
43 t=t+String.fromCharCode(r)
44 }
45 if(a!=64){
46 t=t+String.fromCharCode(i)
47 }
48 }
49 t=Base64._utf8_decode(t);
50 return t
51 },
52 _utf8_encode:function(e){
53 e=e.replace(/rn/g,"n");
54 var t="";
55 for(var n=0;n<e.length;n++){
56 var r=e.charCodeAt(n);
57 if(r<128){
58 t+=String.fromCharCode(r)
59 }else if(r>127&&r<2048){
60 t+=String.fromCharCode(r>>6|192);
61 t+=String.fromCharCode(r&63|128)
62 }else{
63 t+=String.fromCharCode(r>>12|224);
64 t+=String.fromCharCode(r>>6&63|128);
65 t+=String.fromCharCode(r&63|128)
66 }
67 }
68 return t
69 },
70 _utf8_decode:function(e){
71 var t="";
72 var n=0;
73 var r=0,c1=0,c2=0;
74 while(n<e.length){
75 r=e.charCodeAt(n);
76 if(r<128){
77 t+=String.fromCharCode(r);
78 n++
79 }else if(r>191&&r<224){
80 c2=e.charCodeAt(n+1);
81 t+=String.fromCharCode((r&31)<<6|c2&63);
82 n+=2
83 }else{
84 c2=e.charCodeAt(n+1);
85 c3=e.charCodeAt(n+2);
86 t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);
87 n+=3
88 }
89 }
90 return t
91 }
92 };
93
94 export {Base64}; //暴露模块
3、Base64 加密解密
利用decode（）方法解密，encode（）方法加密，Vue项目引入Base64.js文件，如下：
1 //引入Base64.js文件，用Base64对公钥解密
2 const self = this
3 import {Base64} from "../../../dist/static/js/Base64.js"
4 let base64Str = PUBLIC.AJAX_TOKEN.split('.')[1]; //取出加密后的公钥
5 let user = JSON.parse(Base64.decode(base64Str)); //先base64解密，再把json数据转化为js对象
6 self.pkey = user.secret; //公钥
7 console.log(self.pkey);
二、RSA加密算法
RSA加密算法是一种非对称加密算法。一般是客户端初始化时访问登录服务时，服务端面动态生成一对RSA对，把公钥传给客户端，客户端拿到后，用户输入密码后，点登录时用公钥加密返回给服务端，服务端用私钥解密，这样就完成了一次安全的数据传送。
1、安装jsencrypt
1 npm i jsencrypt –save
2、引入jsencrypt
在main.js 文件引入jsencrypt：
1 import JsEncrypt from 'jsencrypt'
2 Vue.prototype.$jsEncrypt = JsEncrypt
3、前端实例化
1 //实例化JSEncrypt
2 self.jse = new JSEncrypt();
3 self.jse.setPublicKey('-----BEGIN PUBLIC KEY-----'+self.pkey+'-----END PUBLIC KEY-----'); //设置公钥
4 self.jse.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----'+self.privateKey+'-----END RSA PRIVATE KEY-----'); //设置私钥
4、加密与解密
1 //RSA加密
2 let encryptVPwd = self.jse.encrypt(self.visitPassword);
3 console.log(encryptVPwd);
4 //RSA解密
5 let decryptVPwd = self.jse.decrypt(encryptVPwd);
6 console.log(decryptVPwd);
这样可以把加密后的密码传给后台了。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
