1

web/src/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, h } from 'vue'
+import { ref, onMounted, computed, h, watch } from 'vue'
 import { RouterView, useRouter, useRoute } from 'vue-router'
 import { NLayout, NLayoutHeader, NLayoutContent, NMenu, NButton, NSpace, NTag, NIcon, NConfigProvider, NMessageProvider, NDialogProvider } from 'naive-ui'
 import { HomeOutline, ExtensionPuzzleOutline, LogOutOutline } from '@vicons/ionicons5'
 import type { MenuOption } from 'naive-ui'
-import { getServerStatus, removeToken } from './api'
+import { getServerStatus, removeToken, getToken } from './api'
 
 const router = useRouter()
 const route = useRoute()
@@ -35,8 +35,8 @@ const handleMenuUpdate = (key: string) => {
   router.push(key)
 }
 
-onMounted(async () => {
-  if (isLoginPage.value) return
+const fetchServerStatus = async () => {
+  if (isLoginPage.value || !getToken()) return
   try {
     const { data } = await getServerStatus()
     serverInfo.value = data.server
@@ -44,6 +44,17 @@ onMounted(async () => {
   } catch (e) {
     console.error('Failed to get server status', e)
   }
+}
+
+// 监听路由变化，离开登录页时获取状态
+watch(() => route.path, (newPath, oldPath) => {
+  if (oldPath === '/login' && newPath !== '/login') {
+    fetchServerStatus()
+  }
+})
+
+onMounted(() => {
+  fetchServerStatus()
 })
 
 const logout = () => {

web/src/api/index.ts

@@ -1,61 +1,32 @@
-import axios from 'axios'
+import { get, post, put, del } from '../config/axios'
 import type { ClientConfig, ClientStatus, ClientDetail, ServerStatus, PluginInfo } from '../types'
 
-const api = axios.create({
-  baseURL: '/api',
-  timeout: 10000,
-})
-
-// Token 管理
-const TOKEN_KEY = 'gotunnel_token'
-
-export const getToken = () => localStorage.getItem(TOKEN_KEY)
-export const setToken = (token: string) => localStorage.setItem(TOKEN_KEY, token)
-export const removeToken = () => localStorage.removeItem(TOKEN_KEY)
-
-// 请求拦截器：添加 token
-api.interceptors.request.use((config) => {
-  const token = getToken()
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`
-  }
-  return config
-})
-
-// 响应拦截器：处理 401
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401) {
-      removeToken()
-      window.location.href = '/login'
-    }
-    return Promise.reject(error)
-  }
-)
+// 重新导出 token 管理方法
+export { getToken, setToken, removeToken } from '../config/axios'
 
 // 认证 API
 export const login = (username: string, password: string) =>
-  api.post<{ token: string }>('/auth/login', { username, password })
-export const checkAuth = () => api.get('/auth/check')
+  post<{ token: string }>('/auth/login', { username, password })
+export const checkAuth = () => get('/auth/check')
 
-export const getServerStatus = () => api.get<ServerStatus>('/status')
-export const getClients = () => api.get<ClientStatus[]>('/clients')
-export const getClient = (id: string) => api.get<ClientDetail>(`/client/${id}`)
-export const addClient = (client: ClientConfig) => api.post('/clients', client)
-export const updateClient = (id: string, client: ClientConfig) => api.put(`/client/${id}`, client)
-export const deleteClient = (id: string) => api.delete(`/client/${id}`)
-export const reloadConfig = () => api.post('/config/reload')
+// 服务器状态
+export const getServerStatus = () => get<ServerStatus>('/status')
+
+// 客户端管理
+export const getClients = () => get<ClientStatus[]>('/clients')
+export const getClient = (id: string) => get<ClientDetail>(`/client/${id}`)
+export const addClient = (client: ClientConfig) => post('/clients', client)
+export const updateClient = (id: string, client: ClientConfig) => put(`/client/${id}`, client)
+export const deleteClient = (id: string) => del(`/client/${id}`)
+export const reloadConfig = () => post('/config/reload')
 
 // 客户端控制
-export const pushConfigToClient = (id: string) => api.post(`/client/${id}/push`)
-export const disconnectClient = (id: string) => api.post(`/client/${id}/disconnect`)
+export const pushConfigToClient = (id: string) => post(`/client/${id}/push`)
+export const disconnectClient = (id: string) => post(`/client/${id}/disconnect`)
 export const installPluginsToClient = (id: string, plugins: string[]) =>
-  api.post(`/client/${id}/install-plugins`, { plugins })
+  post(`/client/${id}/install-plugins`, { plugins })
 
 // 插件管理
-export const getPlugins = () => api.get<PluginInfo[]>('/plugins')
-export const enablePlugin = (name: string) => api.post(`/plugin/${name}/enable`)
-export const disablePlugin = (name: string) => api.post(`/plugin/${name}/disable`)
-
-export default api
+export const getPlugins = () => get<PluginInfo[]>('/plugins')
+export const enablePlugin = (name: string) => post(`/plugin/${name}/enable`)
+export const disablePlugin = (name: string) => post(`/plugin/${name}/disable`)

web/src/config/axios/index.ts

@@ -0,0 +1,88 @@
+import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
+
+// Token 管理
+const TOKEN_KEY = 'gotunnel_token'
+
+export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY)
+export const setToken = (token: string): void => localStorage.setItem(TOKEN_KEY, token)
+export const removeToken = (): void => localStorage.removeItem(TOKEN_KEY)
+
+// 创建 axios 实例
+const instance: AxiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+})
+
+// 防止重复跳转
+let isRedirecting = false
+
+// 请求拦截器
+instance.interceptors.request.use(
+  (config) => {
+    const token = getToken()
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401 && !isRedirecting) {
+      isRedirecting = true
+      removeToken()
+      setTimeout(() => {
+        window.location.replace('/login')
+        isRedirecting = false
+      }, 0)
+    }
+    return Promise.reject(error)
+  }
+)
+
+// 请求方法封装
+export const get = <T = any>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return instance.get<T>(url, config)
+}
+
+export const post = <T = any>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return instance.post<T>(url, data, config)
+}
+
+export const put = <T = any>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return instance.put<T>(url, data, config)
+}
+
+export const del = <T = any>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return instance.delete<T>(url, config)
+}
+
+export const patch = <T = any>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return instance.patch<T>(url, data, config)
+}
+
+export default instance