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