JWT Token管理器

当前存储的JWT Token

存储位置

Token数量

最后更新

系统设置

自动清理过期Token

启用Token备份

Token保留天数

使用帮助

Token存储位置说明

LocalStorage: 浏览器本地存储

SessionStorage: 会话期间存储

Cookies: 跨会话持久化存储

IndexedDB: 结构化数据存储

Memory: 运行时内存存储

就绪

/* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #3b82f6; --primary-dark: #2563eb; --secondary: #64748b; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --dark: #1e293b; --light: #f8fafc; --gray: #e2e8f0; --border: #cbd5e1; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #334155; } .app-container { min-height: 100vh; display: flex; flex-direction: column; } /* 头部导航样式 */ .header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 1rem 2rem; box-shadow: var(--shadow); } .header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 0.75rem; } .nav { display: flex; gap: 0.5rem; } .nav-btn { padding: 0.5rem 1rem; border: none; background: transparent; color: var(--secondary); font-weight: 500; border-radius: 0.5rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .nav-btn:hover { background: var(--gray); color: var(--dark); } .nav-btn.active { background: var(--primary); color: white; } /* 主内容区域 */ .main-content { flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; } .tab-content { display: none; } .tab-content.active { display: block; } /* 面板样式 */ .panel { background: white; border-radius: 1rem; box-shadow: var(--shadow-lg); overflow: hidden; } .panel-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .panel-header h2 { font-size: 1.25rem; font-weight: 600; color: var(--dark); } .action-buttons { display: flex; gap: 1rem; } /* 按钮样式 */ .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: #dc2626; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background: var(--secondary); color: white; } .btn-secondary:hover { background: #475569; } /* 统计卡片 */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--light); border-radius: 0.75rem; border: 1px solid var(--border); transition: all 0.3s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat-icon { width: 3rem; height: 3rem; background: var(--primary); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; } .stat-info h3 { font-size: 0.875rem; color: var(--secondary); font-weight: 500; } .stat-value { font-size: 1.25rem; font-weight: 600; color: var(--dark); } /* Token列表容器 */ .token-list-container { padding: 1.5rem; } .search-box { position: relative; margin-bottom: 1.5rem; } .search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--secondary); } .search-box input { width: 100%; padding: 0.75rem 1rem 0.75rem 3rem; border: 1px solid var(--border); border-radius: 0.75rem; font-size: 0.875rem; transition: all 0.3s ease; } .search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Token项目样式 */ .token-item { background: var(--light); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; border-left: 4px solid var(--primary); transition: all 0.3s ease; } .token-item:hover { transform: translateX(4px); box-shadow: var(--shadow); } .token-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .token-key { font-weight: 600; color: var(--dark); } .token-actions { display: flex; gap: 0.5rem; } .token-preview { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.75rem; color: var(--secondary); background: rgba(0, 0, 0, 0.05); padding: 0.5rem; border-radius: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 设置网格 */ .settings-grid { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--light); border-radius: 0.75rem; } .setting-item label { font-weight: 500; color: var(--dark); } /* 帮助内容 */ .help-content { padding: 1.5rem; } .help-section { margin-bottom: 2rem; } .help-section h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--dark); margin-bottom: 1rem; } .help-list { display: flex; flex-direction: column; gap: 0.75rem; } .help-item { padding: 0.75rem; background: var(--light); border-radius: 0.75rem; } /* 状态栏 */ .status-bar { position: fixed; bottom: 2rem; right: 2rem; background: var(--dark); color: white; padding: 1rem 1.5rem; border-radius: 0.75rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 1rem; transform: translateX(150%); transition: transform 0.3s ease; z-index: 1000; } .status-bar.show { transform: translateX(0); } .status-text { font-weight: 500; } .status-close { background: transparent; border: none; color: white; cursor: pointer; } /* 控制面板 */ .control-panel { position: fixed; bottom: 2rem; left: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .control-btn { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; background: white; border: 1px solid var(--border); border-radius: 0.75rem; cursor: pointer; transition: all 0.3s ease; font-size: 0.75rem; color: var(--secondary); } .control-btn:hover { background: var(--primary); color: white; transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* 模态框样式 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 2000; } .modal-overlay.show { display: flex; } .modal { background: white; border-radius: 1rem; box-shadow: var(--shadow-lg); max-width: 400px; width: 90%; } .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-close { background: transparent; border: none; color: var(--secondary); cursor: pointer; } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 1rem; } /* 页脚 */ .footer { background: var(--dark); color: white; padding: 2rem; text-align: center; } /* 响应式设计 */ @media (max-width: 768px) { .header-content { flex-direction: column; gap: 1rem; } .main-content { padding: 1rem; } .stats-grid { grid-template-columns: 1fr; } .control-panel { bottom: 1rem; left: 1rem; } .status-bar { bottom: 1rem; right: 1rem; } } /* 动画效果 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.3s ease; } class TokenManager { constructor() { this.storageLocations = [ 'localStorage', 'sessionStorage', 'cookies', 'indexedDB', 'memory' ]; this.init(); } init() { this.bindEvents(); this.scanTokens(); this.updateStats(); } bindEvents() { // 导航切换 document.querySelectorAll('.nav-btn').forEach(btn => { btn.addEventListener('click', (e) => { this.switchTab(e.target.dataset.tab); }); }); // 清空所有token按钮 document.getElementById('clearAllBtn').addEventListener('click', () => { this.showConfirmModal(); }); // 刷新按钮 document.getElementById('refreshBtn').addEventListener('click', () => { this.scanTokens(); this.showStatus('Token列表已刷新', 'success'); }); // 扫描按钮 document.getElementById('scanBtn').addEventListener('click', () => { this.forceScan(); }); // 导出按钮 document.getElementById('exportBtn').addEventListener('click', () => { this.exportTokens(); }); // 模态框控制 document.getElementById('closeModal').addEventListener('click', () => { this.hideConfirmModal(); }); document.getElementById('cancelClear').addEventListener('click', () => { this.hideConfirmModal(); }); document.getElementById('confirmClear').addEventListener('click', () => { this.clearAllTokens(); this.hideConfirmModal(); }); // 状态栏控制 document.getElementById('closeStatus').addEventListener('click', () => { this.hideStatus(); }); // 搜索功能 document.getElementById('searchTokens').addEventListener('input', (e) => { this.filterTokens(e.target.value); }); // 设置项变化 document.getElementById('autoClear').addEventListener('change', (e) => { this.saveSettings(); }); document.getElementById('backupEnabled').addEventListener('change', (e) => { this.saveSettings(); }); document.getElementById('retentionDays').addEventListener('change', (e) => { this.saveSettings(); }); } switchTab(tabName) { // 更新导航按钮状态 document.querySelectorAll('.nav-btn').forEach(btn => { btn.classList.remove('active'); }); document.querySelector(`[data-tab="${tabName}"]`).classList.add('active'); // 显示对应的内容区域 document.querySelectorAll('.tab-content').forEach(content => { content.classList.remove('active'); }); document.getElementById(tabName).classList.add('active'); } scanTokens() { const tokens = this.findAllTokens(); this.displayTokens(tokens); this.updateStats(); } findAllTokens() { const tokens = []; // 扫描localStorage try { for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); const value = localStorage.getItem(key); if (this.isJwtToken(value)) { tokens.push({ key: key, value: value, storage: 'localStorage', type: 'JWT' }); } } } catch (error) { console.error('扫描localStorage失败:', error); } // 扫描sessionStorage try { for (let i = 0; i < sessionStorage.length; i++) { const key = sessionStorage.key(i); const value = sessionStorage.getItem(key); if (this.isJwtToken(value)) { tokens.push({ key: key, value: value, storage: 'sessionStorage', type: 'JWT' }); } } } catch (error) { console.error('扫描sessionStorage失败:', error); } // 扫描cookies const cookieTokens = this.scanCookies(); tokens.push(...cookieTokens); return tokens; } scanCookies() { const tokens = []; const cookies = document.cookie.split(';'); cookies.forEach(cookie => { const [key, value] = cookie.trim().split('='); if (value && this.isJwtToken(value)) { tokens.push({ key: key, value: value, storage: 'cookies', type: 'JWT' }); } }); return tokens; } isJwtToken(value) { if (!value || typeof value !== 'string') return false; // JWT token通常由三部分组成，用点分隔 const parts = value.split('.'); if (parts.length !== 3) return false; // 检查是否包含常见的JWT关键词 const jwtIndicators = ['token', 'jwt', 'access', 'refresh', 'auth']; return jwtIndicators.some(indicator => value.toLowerCase().includes(indicator) || this.isBase64(parts[0]) || this.isBase64(parts[1]) ); } isBase64(str) { try { return btoa(atob(str)) === str; } catch { return false; } } displayTokens(tokens) { const container = document.getElementById('tokenList'); container.innerHTML = ''; if (tokens.length === 0) { container.innerHTML = `

未找到JWT Token

`; return; } tokens.forEach(token => { const tokenElement = this.createTokenElement(token); container.appendChild(tokenElement); }); } createTokenElement(token) { const div = document.createElement('div'); div.className = 'token-item fade-in'; const preview = token.value.length > 50 ? token.value.substring(0, 50) + '...' : token.value; div.innerHTML = `

${token.key} ${token.storage} | ${token.type}

${preview}

`; return div; } filterTokens(searchTerm) { const tokens = document.querySelectorAll('.token-item'); const term = searchTerm.toLowerCase(); tokens.forEach(token => { const text = token.textContent.toLowerCase(); token.style.display = text.includes(term) ? 'block' : 'none'; }); } showConfirmModal() { document.getElementById('confirmModal').classList.add('show'); } hideConfirmModal() { document.getElementById('confirmModal').classList.remove('show'); } clearAllTokens() { // 清空localStorage中的token try { for (let i = localStorage.length - 1; i >= 0; i--) { const key = localStorage.key(i); const value = localStorage.getItem(key); if (this.isJwtToken(value)) { localStorage.removeItem(key); } } } catch (error) { console.error('清空localStorage失败:', error); } // 清空sessionStorage中的token try { for (let i = sessionStorage.length - 1; i >= 0; i--) { const key = sessionStorage.key(i); const value = sessionStorage.getItem(key); if (this.isJwtToken(value)) { sessionStorage.removeItem(key); } } } catch (error) { console.error('清空sessionStorage失败:', error); } // 清空cookies中的token this.clearCookieTokens(); this.scanTokens(); this.showStatus('所有JWT Token已清空', 'success'); } clearCookieTokens() { const cookies = document.cookie.split(';'); cookies.forEach(cookie => { const [key] = cookie.trim().split('='); if (key && this.isJwtTokenIndicator(key)) { document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'; }); } isJwtTokenIndicator(key) { const indicators = ['token', 'jwt', 'access', 'refresh', 'auth']; return indicators.some(indicator => key.toLowerCase().includes(indicator) ); } deleteToken(key, storage) { try { switch (storage) { case 'localStorage': localStorage.removeItem(key); break; case 'sessionStorage': sessionStorage.removeItem(key); break; case 'cookies': document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'; break; } } catch (error) { console.error(`删除token失败: ${key} from ${storage}`, error); } this.scanTokens(); this.showStatus('Token已删除', 'success'); } viewToken(key, storage) { // 在实际应用中，这里会显示完整的token信息 this.showStatus(`查看Token: ${key} (${storage}))`, 'info'); } forceScan() { this.showStatus('正在深度扫描所有存储位置...', 'info'); setTimeout(() => { this.scanTokens(); this.showStatus('深度扫描完成', 'success'); } exportTokens() { const tokens = this.findAllTokens(); const data = { exportTime: new Date().toISOString(), tokenCount: tokens.length, tokens: tokens }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `jwt-tokens-${Date.now()}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); this.showStatus('Token数据已导出', 'success'); } showStatus(message, type = 'info') { const statusBar = document.getElementById('statusBar'); const statusText = statusBar.querySelector('.status-text'); statusText.textContent = message; statusBar.className = `status-bar show ${type}`; // 自动隐藏 setTimeout(() => { this.hideStatus(); }, 3000); } hideStatus() { document.getElementById('statusBar').classList.remove('show'); } updateStats() { const tokens = this.findAllTokens(); document.getElementById('storageCount').textContent = this.storageLocations.length; document.getElementById('tokenCount').textContent = tokens.length; document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString(); } saveSettings() { const settings = { autoClear: document.getElementById('autoClear').checked, backupEnabled: document.getElementById('backupEnabled').checked, retentionDays: document.getElementById('retentionDays').value, lastSaved: new Date().toISOString() }; localStorage.setItem('tokenManagerSettings', JSON.stringify(settings))); } loadSettings() { try { const stored = localStorage.getItem('tokenManagerSettings'); if (stored) { const settings = JSON.parse(stored); document.getElementById('autoClear').checked = settings.autoClear; document.getElementById('backupEnabled').checked = settings.backupEnabled; document.getElementById('retentionDays').value = settings.retentionDays || '30'; } } catch (error) { console.error('加载设置失败:', error); } } } // 初始化Token管理器 const tokenManager = new TokenManager(); // 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 加载保存的设置 tokenManager.loadSettings(); // 显示欢迎信息 setTimeout(() => { tokenManager.showStatus('JWT Token管理器已就绪', 'success'); }); // 键盘快捷键支持 document.addEventListener('keydown', function(e) { // Ctrl + Shift + C 清空所有token if (e.ctrlKey && e.shiftKey && e.key === 'C') { tokenManager.showConfirmModal(); } }); } 这个JWT Token管理器提供了以下核心功能： 1. **Token扫描与发现** - 自动扫描localStorage、sessionStorage、cookies等存储位置 2. **可视化展示** - 以卡片形式清晰显示所有找到的Token 3. **一键清空** - 支持快速清除所有存储的JWT Token 4. **搜索筛选** - 可根据关键词快速定位特定Token 5. **数据导出** - 可将所有Token信息导出为JSON文件 6. **状态监控** - 实时显示Token数量和存储状态 Token主要存储在以下几个位置： - localStorage（浏览器本地持久化存储） - sessionStorage（会话期间存储） - cookies（跨会话持久化存储） - indexedDB（结构化数据库） - 内存运行时存储您可以通过点击"清空所有Token"按钮来快速清除所有存储的JWT Token