ok

public/js/main.js

@@ -18,7 +18,7 @@ async function executeCommand() {
     output.textContent = '正在执行命令...';
 
     try {
-        const response = await fetch('/api/execute', {
+        let response = await fetch('/api/execute', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -26,9 +26,29 @@ async function executeCommand() {
             },
             body: JSON.stringify({ command })
         });
+
+        if (response.status === 403) {
+            // Token 可能已过期，尝试刷新
+            const refreshed = await refreshToken();
+            if (refreshed) {
+                // 重试请求
+                response = await fetch('/api/execute', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${localStorage.getItem('token')}`
+                    },
+                    body: JSON.stringify({ command })
+                });
+            } else {
+                throw new Error('Token 刷新失败');
+            }
+        }
+
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }
+
         const data = await response.json();
         output.textContent = data.output || data.error || '命令执行成功，但没有输出。';
         commandInput.value = '';
@@ -36,9 +56,11 @@ async function executeCommand() {
     } catch (error) {
         console.error('执行命令时出错:', error);
         output.textContent = '错误: ' + (error.message || '未知错误');
-        if (error.message.includes('403')) {
-            alert('访问被拒绝。请检查您的权限或重新登录。');
+        if (error.message.includes('Token 刷新失败')) {
+            alert('访问被拒绝。请重新登录。');
             localStorage.removeItem('token');
+            localStorage.removeItem('username');
+            localStorage.removeItem('password');
             checkLoginStatus();
         }
     } finally {
@@ -86,6 +108,8 @@ async function login() {
         const data = await response.json();
         if (response.ok) {
             localStorage.setItem('token', data.token);
+            localStorage.setItem('username', username);
+            localStorage.setItem('password', password);
             document.getElementById('loginForm').style.display = 'none';
             document.getElementById('commandInterface').style.display = 'block';
             loadCommandHistory();
@@ -97,6 +121,34 @@ async function login() {
     }
 }
 
+async function refreshToken() {
+    const username = localStorage.getItem('username');
+    const password = localStorage.getItem('password');
+    if (!username || !password) {
+        // 如果没有保存的凭据，重定向到登录页面
+        document.getElementById('loginForm').style.display = 'block';
+        document.getElementById('commandInterface').style.display = 'none';
+        return;
+    }
+    try {
+        const response = await fetch('/api/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password })
+        });
+        const data = await response.json();
+        if (response.ok) {
+            localStorage.setItem('token', data.token);
+            return true;
+        } else {
+            throw new Error(data.error);
+        }
+    } catch (error) {
+        console.error('刷新 token 失败:', error);
+        return false;
+    }
+}
+
 document.getElementById('loginButton').addEventListener('click', login);
 
 loadCommandHistory();
@@ -112,5 +164,4 @@ function checkLoginStatus() {
 
 // 在页面加载时调用此函数
 window.addEventListener('load', checkLoginStatus);
-
 document.getElementById('executeButton').addEventListener('click', executeCommand);