实现 JwtDecoder 工具

分类：developer ｜ 标签：JWT、token、解码 解析 JWT 的 Header/Payload（不校验签名），查看登录态与过期时间

2.1 功能说明

解析 JWT 的 Header/Payload（不校验签名），查看登录态与过期时间

2.1.1 使用指南

功能说明

将 JWT（JSON Web Token）按 . 拆分为 Header / Payload / Signature 三部分，对前两部分做 Base64URL 解码并格式化展示。本工具不校验签名，仅用于查看 token 中携带的信息。

使用场景

调试登录态、查看后端下发的用户/过期信息、排查 token 解析异常。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• b64urlDecode()
• tryParse()
• decode()
• clear()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const token = ref('')
const header = ref('')
const payload = ref('')
const signature = ref('')
const error = ref('')
const expTip = ref('')

function b64urlDecode(str) {
  let s = str.replace(/-/g, '+').replace(/_/g, '/')
  const pad = s.length % 4
  if (pad) s += '='.repeat(4 - pad)
  const bytes = Uint8Array.from(atob(s), c => c.charCodeAt(0))
  return new TextDecoder().decode(bytes)
}

function tryParse(s) {
  try { return JSON.stringify(JSON.parse(s), null, 2) } catch { return s }
}

function decode() {
  error.value = ''
  header.value = payload.value = signature.value = expTip.value = ''
  const t = token.value.trim()
  if (!t) { error.value = '请输入 JWT 字符串'; return }
  const parts = t.split('.')
  if (parts.length !== 3) { error.value = 'JWT 格式应为 3 段（用 . 分隔），当前为 ' + parts.length + ' 段'; return }
  try { header.value = tryParse(b64urlDecode(parts[0])) } catch { error.value = 'Header 解码失败'; return }
  try {
    const rawPayload = b64urlDecode(parts[1])
    payload.value = tryParse(rawPayload)
    const obj = JSON.parse(rawPayload)
    if (obj.exp) {
      const d = new Date(obj.exp * 1000)
      const now = Date.now()
      expTip.value = '过期时间(exp)：' + d.toLocaleString() + (now > d ? '（已过期）' : '（未过期）')
    }
  } catch { error.value = 'Payload 解码失败'; return }
  signature.value = parts[2]
}

function clear() {
  token.value = ''
  header.value = payload.value = signature.value = error.value = expTip.value = ''
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/jwt-decoder