前端base64加密

一、Base64編碼表

碼值	字符	碼值	字符	碼值	字符	碼值	字符
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

 

 

 

二、原理和過程

舉個栗子說明原理和過程：

　 轉碼過程例子：3 * 8 = 4 * 6   內存1個字節占8位

          轉前： s     1    3

先轉成ascii對應：115   49   51

 翻譯為2進制8*3：01110011  00110001  00110011

    重新分組6*4：011100   110011   000100   110011

然后計算機是8位的存數，6位不夠，高位自動補0 

 科學計算器輸入：00011100  00110011  00000100  00110011

   對應十進制為：28      　　51       　　4        　　 51

     照表譯碼為：c       　　z        　　E       　　  z

 

 

三、Base64的JavaScript實現方式

// Create Base64 Objectvar
Base64 = {  3   _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",  4   encode: function (e) {  5     var t = "";  6     var n, r, i, s, o, u, a;  7     var f = 0;  8     e = Base64._utf8_encode(e);  9     while (f < e.length) {  10       n = e.charCodeAt(f++);  11       r = e.charCodeAt(f++);  12       i = e.charCodeAt(f++);  13       s = n >> 2;  14       o = (n & 3) << 4 | r >> 4;  15       u = (r & 15) << 2 | i >> 6;  16       a = i & 63;  17       if (isNaN(r)) {  18         u = a = 64
      } else if (isNaN(i)) {  20         a = 64
 }  22       t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)  23  }  24     return t  25  },  26   decode: function (e) {  27     var t = "";  28     var n, r, i;  29     var s, o, u, a;  30     var f = 0;  31     e = e.replace(/[^A-Za-z0-9+/=]/g, "");
    while (f < e.length) {  33       s = this._keyStr.indexOf(e.charAt(f++));  34       o = this._keyStr.indexOf(e.charAt(f++));  35       u = this._keyStr.indexOf(e.charAt(f++));  36       a = this._keyStr.indexOf(e.charAt(f++));  37       n = s << 2 | o >> 4;  38       r = (o & 15) << 4 | u >> 2;  39       i = (u & 3) << 6 | a;  40       t = t + String.fromCharCode(n);  41       if (u != 64) {  42         t = t + String.fromCharCode(r)  43  }  44       if (a != 64) {  45         t = t + String.fromCharCode(i)  46  }  47  }  48     t = Base64._utf8_decode(t);  49     return t  50   }, _utf8_encode: function (e) {  51     e = e.replace(/rn/g, "n");  52     var t = "";  53     for (var n = 0; n < e.length; n++) {  54       var r = e.charCodeAt(n);  55       if (r < 128) {  56         t += String.fromCharCode(r)  57       } else if (r > 127 && r < 2048) {  58         t += String.fromCharCode(r >> 6 | 192);  59         t += String.fromCharCode(r & 63 | 128)  60       } else {  61         t += String.fromCharCode(r >> 12 | 224);  62         t += String.fromCharCode(r >> 6 & 63 | 128);  63         t += String.fromCharCode(r & 63 | 128)  64  }  65  }  66     return t  67   }, _utf8_decode: function (e) {  68     var t = "";  69     var n = 0;  70     var r = c1 = c2 = 0;  71     while (n < e.length) {  72       r = e.charCodeAt(n);  73       if (r < 128) {  74         t += String.fromCharCode(r);  75         n++
      } else if (r > 191 && r < 224) {  77         c2 = e.charCodeAt(n + 1);  78         t += String.fromCharCode((r & 31) << 6 | c2 & 63);  79         n += 2
      } else {  81         c2 = e.charCodeAt(n + 1);  82         c3 = e.charCodeAt(n + 2);  83         t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);  84         n += 3
 }  86  }  87     return t  88  }  89 }  90 // Define the string
var string = 'Hello World!';  92 // Encode the String
var encodedString = Base64.encode(string);  94 console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the String
var decodedString = Base64.decode(encodedString);  97 console.log(decodedString); // Outputs: "Hello World!"

//這個自定義的Base64對象可以轉碼的字符也不僅限於Latin1字符;
var string = "Hello, 中國！"; 101 var encodedString = Base64.encode(string);//"SGVsbG8sIOS4reWbve+8gQ=="
console.log(encodedString); 103 var decodedString = Base64.decode(encodedString); 104 console.log(decodedString); //"Hello, 中國！"

 

四、JavaScript的api支持Base64

javascript的api支持Base64，因此我們可以很方便的來進行編譯碼。

var encodeData = window.btoa("name=xiaoming&age=10")　　//編碼　　bmFtZT14aWFvbWluZyZhZ2U9MTA=

var decodeData = window.atob(encodeData)　　　//解碼　　name=xiaoming&age=10

btoa和atob是window對象的兩個函數，其中btoa是binary to ascii，用於將binary的數據用ascii碼表示，即Base64的編碼過程，而atob則是ascii to binary，用於將ascii碼解析成binary數據，看一個例子：

1 // Define the stringvar
2 string = 'Hello World!';
3 
4 // Encode the Stringvar
5 encodedString = btoa(string);　　console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
6 
7 // Decode the Stringvar
8 decodedString = atob(encodedString);　　console.log(decodedString); // Outputs: "Hello World!"

但是window.btoa這中編碼方式不能直接作用於Unicode字符串,只能將ascci字符串或二進制數據轉換成Base64編碼過的字符串。

如果要對Unicode字符進行編碼可以將做如下轉換：

var encodeData = window.btoa(window.encodeURIComponent("name=小明&age=10"))　　//編碼　　bmFtZSUzRCVFNSVCMCU4RiVFNiU5OCU4RSUyNmFnZSUzRDEw

var decodeData = window.decodeURIComponent(window.atob(encodeData))　　//解碼　　name=小明&age=10

 

五、通過nodeJs包管理工具安裝base64插件:

npm install --save js-base64

引入base64：

import { Base64 } from 'js-base64';

使用base64:

　　編碼：Base64.encode();  

　　譯碼：Base64.decode();