Add token expiration time display below the Token input field
This commit is contained in:
		
							
								
								
									
										70
									
								
								worker.js
									
									
									
									
									
								
							
							
						
						
									
										70
									
								
								worker.js
									
									
									
									
									
								
							| @@ -1192,6 +1192,20 @@ function getHTML() { | ||||
| '      margin: 0;', | ||||
| '      color: #2c3e50;', | ||||
| '      font-size: 0.9rem;', | ||||
| '      margin-bottom: 8px;', // 添加底部间距 | ||||
| '    }', | ||||
|  | ||||
| '    .cookie-info p:last-child {', | ||||
| '      margin-bottom: 0;', // 最后一个p元素不需要底部间距 | ||||
| '    }', | ||||
|  | ||||
| '    .token-expiry {', | ||||
| '      color: #7f8c8d;', | ||||
| '      font-size: 0.85rem;', | ||||
| '    }', | ||||
|  | ||||
| '    .token-expiry.expired {', | ||||
| '      color: #e74c3c;', | ||||
| '    }', | ||||
|  | ||||
| '    #currentTokenDisplay {', | ||||
| @@ -1283,6 +1297,7 @@ function getHTML() { | ||||
|     '</div>', | ||||
|     '<div class="cookie-info">', | ||||
|     '<p>当前Token: <span id="currentTokenDisplay">未设置</span></p>', | ||||
|     '<p>过期时间: <span id="tokenExpiryDisplay" class="token-expiry">未知</span></p>', | ||||
|     '</div>', | ||||
|     '<button class="save-btn" id="saveTokens">保存设置</button>', | ||||
|     '</div>', | ||||
| @@ -1529,6 +1544,9 @@ function getHTML() { | ||||
|     '      document.getElementById(\'currentTokenDisplay\').textContent = ', | ||||
|     '        token.slice(0, 10) + "..." + token.slice(-10);', | ||||
|     '      ', | ||||
|     '      // 更新过期时间显示', | ||||
|     '      updateTokenExpiryDisplay(token);', | ||||
|     '      ', | ||||
|     '      alert(\'设置已保存\');', | ||||
|     '    });', | ||||
|  | ||||
| @@ -1988,6 +2006,7 @@ function getHTML() { | ||||
|     '          currentToken = token;', | ||||
|     '          document.getElementById(\'currentTokenDisplay\').textContent = ', | ||||
|     '            token.slice(0, 10) + "..." + token.slice(-10);', | ||||
|     '          updateTokenExpiryDisplay(token);', // 修改这行,确保正确的字符串格式 | ||||
|     '        }', | ||||
|     '      }', | ||||
|     '    }', | ||||
| @@ -2020,6 +2039,57 @@ function getHTML() { | ||||
|     '    }', | ||||
|  | ||||
|     '    loadAdvancedSettings();', | ||||
|  | ||||
|     '    // JWT解析函数', | ||||
|     '    function parseJwt(token) {', | ||||
|     '      try {', | ||||
|     '        const base64Url = token.split(\'.\')[1];', | ||||
|     '        const base64 = base64Url.replace(/-/g, \'+\').replace(/_/g, \'/\');', | ||||
|     '        const jsonPayload = decodeURIComponent(atob(base64).split(\'\').map(function(c) {', | ||||
|     '          return \'%\' + (\'00\' + c.charCodeAt(0).toString(16)).slice(-2);', | ||||
|     '        }).join(\'\'));', | ||||
|     '        return JSON.parse(jsonPayload);', | ||||
|     '      } catch (e) {', | ||||
|     '        console.error(\'JWT解析错误:\', e);', | ||||
|     '        return null;', | ||||
|     '      }', | ||||
|     '    }', | ||||
|  | ||||
|     '    // 更新Token过期时间显示', | ||||
|     '    function updateTokenExpiryDisplay(token) {', | ||||
|     '      const expiryDisplay = document.getElementById(\'tokenExpiryDisplay\');', | ||||
|     '      if (!token) {', | ||||
|     '        expiryDisplay.textContent = \'未设置\';', | ||||
|     '        expiryDisplay.classList.remove(\'expired\');', | ||||
|     '        return;', | ||||
|     '      }', | ||||
|     '      ', | ||||
|     '      const decoded = parseJwt(token);', | ||||
|     '      if (!decoded || !decoded.exp) {', | ||||
|     '        expiryDisplay.textContent = \'无法解析过期时间\';', | ||||
|     '        return;', | ||||
|     '      }', | ||||
|     '      ', | ||||
|     '      const expiryDate = new Date(decoded.exp * 1000);', | ||||
|     '      const now = new Date();', | ||||
|     '      const isExpired = expiryDate < now;', | ||||
|     '      ', | ||||
|     '      expiryDisplay.textContent = expiryDate.toLocaleString(\'zh-CN\', {', | ||||
|     '        year: \'numeric\',', | ||||
|     '        month: \'2-digit\',', | ||||
|     '        day: \'2-digit\',', | ||||
|     '        hour: \'2-digit\',', | ||||
|     '        minute: \'2-digit\',', | ||||
|     '        second: \'2-digit\'', | ||||
|     '      });', | ||||
|     '      ', | ||||
|     '      if (isExpired) {', | ||||
|     '        expiryDisplay.classList.add(\'expired\');', | ||||
|     '        expiryDisplay.textContent += \' (已过期)\';', | ||||
|     '      } else {', | ||||
|     '        expiryDisplay.classList.remove(\'expired\');', | ||||
|     '      }', | ||||
|     '    }', | ||||
|     '</script>', | ||||
|     '</body>', | ||||
|     '</html>' | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 cunninger
					cunninger