JWT 解码器 | 在线工具

🔑 JWT Token

<button class="btn btn-primary" id="decodeBtn">🔓 解码</button>
            <button class="btn btn-outline" id="clearBtn">🗑️ 清空</button>
            <button class="btn btn-outline" id="exampleBtn">📌 填入示例</button>
        </div>
        <div id="results" style="display:none;">
            <div class="section open" id="headerSection">
                <div class="section-header">📦 Header</div>
                <div class="section-body" id="headerBody"></div>
            </div>
            <div class="section open" id="payloadSection">
                <div class="section-header">📋 Payload</div>
                <div class="section-body" id="payloadBody"></div>
            </div>
            <div class="section" id="claimsSection">
                <div class="section-header">📊 Claims 解析</div>
                <div class="section-body" id="claimsBody"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        🧰 ACE 实验室 · 开源工具 | <a href="https://github.com/ace-trump-tech/html-lab" target="_blank">GitHub 仓库</a>  | <a href="../"><strong>← 返回首页</strong></a>
    </div>
</div>
<div id="toastMsg" class="toast-msg">✅ 已解码</div>

function showToast(msg, isErr) {
        if (toastTimer) clearTimeout(toastTimer);
        toast.textContent = msg;
        toast.style.background = isErr ? '#be123c' : '#0f172a';
        toast.style.opacity = '1';
        toastTimer = setTimeout(function() { toast.style.opacity = '0'; }, 1800);
    }

function formatJSON(obj) {
        return JSON.stringify(obj, null, 2);
    }

function decodeJWT() {
        var token = jwtInput.value.trim();
        if (!token) { showToast('⚠️ 请输入 JWT Token', true); return; }
        var parts = token.split('.');
        if (parts.length !== 3) { showToast('⚠️ JWT 格式无效，应为三段以 . 分隔', true); return; }
        try {
            var header = base64UrlDecode(parts[0]);
            var payload = base64UrlDecode(parts[1]);

document.getElementById('headerBody').textContent = formatJSON(header);
            document.getElementById('payloadBody').textContent = formatJSON(payload);

// Claims display
            var claimsHtml = '<div class="claims-grid">';
            var claimMap = {
                'iss': '签发者 (Issuer)',
                'sub': '主题 (Subject)',
                'aud': '受众 (Audience)',
                'exp': '过期时间 (Expiration)',
                'nbf': '生效时间 (Not Before)',
                'iat': '签发时间 (Issued At)',
                'jti': 'JWT ID'
            };
            var now = Math.floor(Date.now() / 1000);
            Object.keys(payload).forEach(function(key) {
                var label = claimMap[key] || key;
                var value = payload[key];
                var extra = '';
                if ((key === 'exp' || key === 'nbf' || key === 'iat') && typeof value === 'number') {
                    var d = new Date(value * 1000);
                    var isExpired = key === 'exp' && value < now;
                    var isNotYet = key === 'nbf' && value > now;
                    extra = ' <span style="font-size:0.75rem;color:#94a3b8;">(' + d.toLocaleString('zh-CN') + ')</span>';
                    if (isExpired) extra += ' <span class="badge-expired">已过期</span>';
                    if (isNotYet) extra += ' <span class="badge-expired">尚未生效</span>';
                }
                if (key === 'iat' && typeof value === 'number') {
                    // Check if token is generally valid
                    if (payload.exp && payload.exp < now) {
                        extra += ' <span class="badge-expired">Token 已过期</span>';
                    }
                }
                claimsHtml += '<div class="claim-item"><div class="claim-key">' + label + '</div><div class="claim-value">' + String(value) + extra + '</div></div>';
            });
            claimsHtml += '</div>';
            document.getElementById('claimsBody').innerHTML = claimsHtml;

document.getElementById('results').style.display = 'block';
            showToast('✅ JWT 解码成功');
        } catch (e) {
            showToast('❌ 解码失败: ' + e.message, true);
        }
    }

document.getElementById('decodeBtn').addEventListener('click', decodeJWT);

document.getElementById('clearBtn').addEventListener('click', function() {
        jwtInput.value = '';
        document.getElementById('results').style.display = 'none';
        showToast('🧹 已清空');
    });

// Toggle sections
    document.querySelectorAll('.section-header').forEach(function(h) {
        h.addEventListener('click', function() {
            this.parentElement.classList.toggle('open');
            this.nextElementSibling.classList.toggle('collapsed');
        });
    });
})();
</script>
</body>
</html>

🔍 JWT 解码器 Header · Payload · Claims