前端加密和解密

 

1.第一种就是base64格式的加密与解密

window.atob() 与window.btoa()可以实现对base64格式的数据进行解码和编码，其兼容性是主流浏览器，IE10及以上。

window.atob(encodedStr)只可以解码用btoa方法编码的字符串。

window.btoa()：将ascii字符串或二进制数据转换成一个base64编码过的字符串,但该方法不能直接作用于Unicode字符串

                let aa = window.btoa('123782')
                console.log(aa)
                console.log(window.atob(aa))                

 

 

 

当遇到中文时，需要先对中文转码否则会乱码。

var str = btoa(encodeURIComponent("中文汉字"));
//还可以解码回来
decodeURIComponent(atob(enc)) =>  中文汉字

 

2. 第二种MD5加密

首先引入相关js,对要加密的内容直接加密

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script>
  var b =$("#logPassword");
  $.md5(b.val())
<script>

 

MD5没有解密算法，或者说解密算法很复杂，所以可以在数据库中存放经过两次MD5加密的的内容，也可以再配合加‘盐’。

console.log(md5(md5("Condor Hero") + "a"));

 

3.第三种加密RSA用公钥私钥加密解密

先引入相关配置文件

<script src="js/jsencrypt.js"></script>

 

前端在向后台发起登录请求之前，先请求后台获取公钥的方法

 var publicKey = null;
    $.ajax({
                url: "xxx",
                type: "post",
                dataType: "text",
                success: function(data) {
                    var encrypt = new JSEncrypt();
                    if(data){
                        publicKey = data;
                    };
                }
            });
通过公钥对用户名和密码加密

encrypt.setPublicKey(publicKey);
 var username;
var password;
username = encrypt.encrypt(vm.username.trim());
password = encrypt.encrypt(vm.password.trim());
接下来就是用加密后的用户名密码请求后台，用户名密码传输时千万不要字符串拼接方式传输

$.ajax({
type: "POST",
 url: "xxxxxx",
 data: {
       "username":username,
        "password":password,
},
 dataType: "json",
 success: function (result) {
        if (result.code == 0) {//登录成功
         parent.location.href = 'index.html';
        } else {
            vm.error = true;
           vm.errorMsg = result.msg;
            vm.refreshCode();
      }
    }
 });

 

4.第四种加密sha1

引入配置文件

<script type="text/ecmascript" src="sha1.js"></script>

 

加密

var sha = hex_sha1('mima123465');
console.log(sha);

 

sha1加密是一种不可逆的加密方式，将明文转换成一段散列值（摘要），将报文摘要加密后与明文一起传送给接受方，接受方将接受的明文产生新的报文摘要与发送方的发来报文摘要解密比较，比较结果一致表示明文未被改动，如果不一致表示明文已被篡改。

 

参考链接:https://zhuanlan.zhihu.com/p/142751271