jwtフロントエンド分析
フロントエンドとバックエンドの分離プロジェクトを行う場合、フロントエンドで jwt を保存する必要があり、場合によっては jwt 内のデータを解析する必要があります。インターネット上にはサードパーティ コンポーネントを使用する方法がたくさんありますが、 jsのネイティブメソッドでも解決できますが、互換性などの問題はありますが、修正も可能です。
私たちの jwt データ キャリアは Base64 で暗号化されているため、キャリアの文字列を Base64 でデコードするだけで済みます! ただし、注意
: Base64 に対応する文字テーブルには、26 個の大文字と小文字、10 個のアラビア数字、+ を含む合計 64 文字があります。記号と / 記号; 添付: (一般に接尾辞に使用される「=」記号もあります)。次に、base64 形式の一部の出力では、一部の非準拠文字を置換する必要があります。
Base64をJSONに変換する
方法 1:
(通常、解析する貴重な Base64 文字を取得するために jwt 文字列を分割します)
このように行うことができます (最も洗練された解決策)
'_'、'-' を変換する必要があります。そうしないと解析されません。
var userinfo = JSON.parse(decodeURIComponent(escape(window.atob('base64字符串'.replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
誰でもテストできる Base64 コード:
eyJzdWIiOiJkZWZhdWx0IiwidXBuIjoiYWRtaW4iLCJpc3MiOiJDTj10aG9yb3VnaCIsImlhdCI6MTY4NDE0NzUwNSwiZXhwIjoxNjg0MjA3NTA1LCJ1c2VySWQiOiIxIiwidXNlck5hbWUiOiLns7vnu5_nrqHnkIblkZgiLCJ1c2VyVHlwZSI6IjAiLCJyZWZyZXNoVG9rZW4iOiJhZWE5NmY4Yy1jNDM1LTRhNmUtYThlMS02OGI2ZWQwODNhMDciLCJqdGkiOiJhY2FjYmEwYy04Nzc4LTQzZTMtYjVjMC1iNjQ5ZTAxMTlmMmYifQ
方法 2:
自分で Base64 コードを解析して生成するユーティリティを作成します。
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(e) {
var t = "";
var n, r, i, s, o, u, a;
var f = 0;
e = Base64._utf8_encode(e);
while (f < e.length) {
n = e.charCodeAt(f++);
r = e.charCodeAt(f++);
i = e.charCodeAt(f++);
s = n >> 2;
o = (n & 3) << 4 | r >> 4;
u = (r & 15) << 2 | i >> 6;
a = i & 63;
if (isNaN(r)) {
u = a = 64
} else if (isNaN(i)) {
a = 64
}
t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
}
return t
},
decode: function(e) {
var t = "";
var n, r, i;
var s, o, u, a;
var f = 0;
e = e.replace(/[^A-Za-z0-9+/=]/g, "");
while (f < e.length) {
s = this._keyStr.indexOf(e.charAt(f++));
o = this._keyStr.indexOf(e.charAt(f++));
u = this._keyStr.indexOf(e.charAt(f++));
a = this._keyStr.indexOf(e.charAt(f++));
n = s << 2 | o >> 4;
r = (o & 15) << 4 | u >> 2;
i = (u & 3) << 6 | a;
t = t + String.fromCharCode(n);
if (u != 64) {
t = t + String.fromCharCode(r)
}
if (a != 64) {
t = t + String.fromCharCode(i)
}
}
t = Base64._utf8_decode(t);
return t
},
_utf8_encode: function(e) {
e = e.replace(/rn/g, "n");
var t = "";
for (var n = 0; n < e.length; n++) {
var r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r)
} else if (r > 127 && r < 2048) {
t += String.fromCharCode(r >> 6 | 192);
t += String.fromCharCode(r & 63 | 128)
} else {
t += String.fromCharCode(r >> 12 | 224);
t += String.fromCharCode(r >> 6 & 63 | 128);
t += String.fromCharCode(r & 63 | 128)
}
}
return t
},
_utf8_decode: function(e) {
var t = "";
var n = 0;
var r = c1 = c2 = 0;
while (n < e.length) {
r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r);
n++
} else if (r > 191 && r < 224) {
c2 = e.charCodeAt(n + 1);
t += String.fromCharCode((r & 31) << 6 | c2 & 63);
n += 2
} else {
c2 = e.charCodeAt(n + 1);
c3 = e.charCodeAt(n + 2);
t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
n += 3
}
}
return t
}
};
使用法:
生成:
var enstr = Base64.encode(JSON.stringify({
"sub": "default",
"upn": "admin",
"iss": "CN=thorough",
"iat": 1684147505,
"exp": 1684207505,
"userId": "1",
"userName": "系统管理员",
"userType": "0",
"refreshToken": "aea96f8c-c435-4a6e-a8e1-68b6ed083a07",
"jti": "acacba0c-8778-43e3-b5c0-b649e0119f2f"
}));
console.log(enstr);
割れ目：
var destr = Base64.decode(enstr);
console.log(JSON.parse(destr));
方法 3:
ライブラリ ファイルを使用する:js-base64
npm install --save js-base64
import {
decode} from 'js-base64'
console.log("解密：",decode('eyJraWQiOiJkZWZhdWx0IiwidHlwIjoiSldUIiwiYWxnIjoiUlMyNTYifQ'));
詳細については、ドキュメントを確認してください: https://www.npmjs.com/package/js-base64
上記の Base64 分析原理は次のとおりです。
原始的な方法でコーディングしている場合は
注意してください
const txt = new Buffer('文字').toString('base64');
//encodeURIComponent() 函数可以把字符串作为 URI 组件进行编码并且不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码
const urltxt = encodeURIComponent(txt);
console.log(urltxt)
//所对应的，在需要将base64转为utf-8，须提前用decodeURIComponent()进行一次解码，才可以保证解码成功，不乱码
//decodeURIComponent()函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
const zurltxt = new Buffer(decodeURIComponent(urltxt), 'base64').toString('utf8');
console.log(zurltxt)
たった今
encodeURIComponent()：把字符串作为URI 组件进行编码
decodeURIComponent()：对 encodeURIComponent() 函数编码的 URI 进行解码
オリジナルの btoa、atob を使用して中国語をエンコードしてみることができます。
このエンコード モードを体験してください。中国語も通常どおりエンコードおよび解析できます。
let msg = {
name:"勇敢牛牛",age:18};
let base64 = btoa(unescape(encodeURIComponent(JSON.stringify(msg))));
console.log(base64);
let Tmsg = decodeURIComponent(escape(atob(base64)));
console.log(JSON.parse(Tmsg));
或者封装成一个函数
// 使用utf-8字符集进行base64编码
function utoa(str) {
return btoa(unescape(encodeURIComponent(str)));
}
// 使用utf-8字符集解析base64字符串
function atou(str) {
return decodeURIComponent(escape(atob(str)));
}
atou 関数: 実際、この関数の鍵はラテン文字を utf-8 文字に変換することです。
ここでのメソッドは詳細に分析でき、ここで見ることができます:
プログラミングの成果