前端 js base64解密

有勇气的牛排 524 前端 2023-05-18 22:40:38

文章目录

1 介绍
2 安装
3 base64加密/解密案例
4 decode与atob
5 jwt解析操作实战

1 介绍

本文将使用 js-base64 进行js base64相关操作

2 安装

npm

npm install --save js-base64

cdn

<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>

3 base64加密/解密案例

加密、解密具体方法如下案例所示

let nick = "有勇气的牛排good"
// 显式扩展
Base64.extendString();
// 加密
console.log(nick.toBase64())        // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA==
console.log(nick.toBase64(true))    // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA
console.log(nick.toBase64URI())     // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA
console.log(nick.toBase64URL())     // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA

// 解密
console.log(nick.toBase64().fromBase64())        // 有勇气的牛排good
console.log(nick.toBase64(true).fromBase64())    // 有勇气的牛排good
console.log(nick.toBase64URI().fromBase64())     // 有勇气的牛排good
            
console.log(nick.toBase64URL().toUint8Array())   
// Uint8Array(22) [230, 156, 137, 229, 139, 135, 230, 176, 148, 231, 154, 132, 231, 137, 155, 230, 142, 146, 103, 111, 111, 100, buffer: ArrayBuffer(22), byteLength: 22, byteOffset: 0, length: 22, Symbol(Symbol.toStringTag): 'Uint8Array']

4 decode与atob

Base64.decode() ：解码为 UTF-8字符串
Base64.atob()：解码为字节

5 jwt解析操作实战

function jwt_parse(token) {
	return Base64.atob(token.split(".")[1]);
}

let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJcdTY3MDlcdTUyYzdcdTZjMTRcdTc2ODRcdTcyNWJcdTYzOTIiLCJpYXQiOjE2Njc0NTg5ODAsImV4cCI6MTY2ODA2Mzc4MCwiYXVkIjoid3d3LmNvdXJhZ2VzdGVhay5jb20iLCJkYXRhIjp7InVpZCI6MSwidXNlcm5hbWUiOiJjaGVhcmxlcyJ9fQ.4Xrf3Chpfu1qOnmDy7UQqJAt6dpvKBVxafvr7gdCwdk";
let userinfo = jwt_parse(token)
console.log(userinfo)

结果

{
	"iss": "有勇气的牛排",
	"iat": 1667458980,
	"exp": 1668063780,
	"aud": "www.couragesteak.com",
	"data": {
		"uid": 1,
		"username": "charles"
	}
}

<h3>文章目录</h3><ul><ul><li><a href="#1__1">1 介绍</a></li><li><a href="#2__4">2 安装</a></li><li><a href="#3_base64_15">3 base64加密/解密案例</a></li><li><a href="#4_decodeatob_38">4 decode与atob</a></li><li><a href="#5_jwt_42">5 jwt解析操作实战</a></li></ul></ul> <h2><a id="1__1"></a>1 介绍</h2> 本文将使用 <a href="https://github.com/dankogai/js-base64" target="_blank">js-base64</a> 进行js base64相关操作 <h2><a id="2__4"></a>2 安装</h2> npm <pre><div class="hljs"><code class="lang-powershell">npm install --save js-base64 </code></div></pre> cdn <pre><div class="hljs"><code class="lang-powershell"><script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script> </code></div></pre> <h2><a id="3_base64_15"></a>3 base64加密/解密案例</h2> 加密、解密具体方法如下案例所示 <pre><div class="hljs"><code class="lang-javascript">let nick = "有勇气的牛排good" // 显式扩展 Base64.extendString(); // 加密 console.log(nick.toBase64()) // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA== console.log(nick.toBase64(true)) // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA console.log(nick.toBase64URI()) // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA console.log(nick.toBase64URL()) // 5pyJ5YuH5rCU55qE54mb5o6SZ29vZA // 解密 console.log(nick.toBase64().fromBase64()) // 有勇气的牛排good console.log(nick.toBase64(true).fromBase64()) // 有勇气的牛排good console.log(nick.toBase64URI().fromBase64()) // 有勇气的牛排good console.log(nick.toBase64URL().toUint8Array()) // Uint8Array(22) [230, 156, 137, 229, 139, 135, 230, 176, 148, 231, 154, 132, 231, 137, 155, 230, 142, 146, 103, 111, 111, 100, buffer: ArrayBuffer(22), byteLength: 22, byteOffset: 0, length: 22, Symbol(Symbol.toStringTag): 'Uint8Array'] </code></div></pre> <img src="https://static.couragesteak.com/article/bfc2de1af1cfe68de1d497081d624233.png" alt="image.png" /> <h2><a id="4_decodeatob_38"></a>4 decode与atob</h2> <code>Base64.decode() </code>：解码为 UTF-8字符串 <code>Base64.atob()</code>：解码为字节 <h2><a id="5_jwt_42"></a>5 jwt解析操作实战</h2> <pre><div class="hljs"><code class="lang-javascript">function jwt_parse(token) { return Base64.atob(token.split(".")[1]); } let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJcdTY3MDlcdTUyYzdcdTZjMTRcdTc2ODRcdTcyNWJcdTYzOTIiLCJpYXQiOjE2Njc0NTg5ODAsImV4cCI6MTY2ODA2Mzc4MCwiYXVkIjoid3d3LmNvdXJhZ2VzdGVhay5jb20iLCJkYXRhIjp7InVpZCI6MSwidXNlcm5hbWUiOiJjaGVhcmxlcyJ9fQ.4Xrf3Chpfu1qOnmDy7UQqJAt6dpvKBVxafvr7gdCwdk"; let userinfo = jwt_parse(token) console.log(userinfo) </code></div></pre> 结果 <pre><div class="hljs"><code class="lang-json">{ "iss": "有勇气的牛排", "iat": 1667458980, "exp": 1668063780, "aud": "www.couragesteak.com", "data": { "uid": 1, "username": "charles" } } </code></div></pre>