From 257668f3f307d193e77d2129b66258232178fb2f Mon Sep 17 00:00:00 2001
From: Nick Zeng <Nick.Zeng@wpic.co>
Date: Wed, 18 Mar 2026 14:55:37 +0800
Subject: [PATCH] Fix auth security: add request timeout, safe redirects, and
 memory-only token support.

---
 .../src/components/layouts/MainLayout.vue     | 19 +----
 frontend/src/main.ts                          |  5 ++
 frontend/src/pages/login.vue                  | 43 ++++++-----
 frontend/src/pages/register.vue               | 49 ++++++------
 frontend/src/stores/user.ts                   | 18 ++++-
 frontend/src/utils/request.ts                 | 75 ++++++++++++++-----
 6 files changed, 126 insertions(+), 83 deletions(-)

diff --git a/frontend/src/components/layouts/MainLayout.vue b/frontend/src/components/layouts/MainLayout.vue
index f881648..10298ac 100644
--- a/frontend/src/components/layouts/MainLayout.vue
+++ b/frontend/src/components/layouts/MainLayout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Brand from '@/components/Brand.vue'
+import { useUserStore } from '@/stores/user'
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
@@ -25,6 +26,7 @@ interface MenuItem {
 
 const router = useRouter()
 const route = useRoute()
+const userStore = useUserStore()
 
 // 侧边栏折叠状态，持久化到 localStorage
 const collapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true')
@@ -75,18 +77,7 @@ const menuItems: MenuItem[] = [
   { key: '/mq-status', icon: MonitorOutlined, label: '队列监控' },
 ]
 
-// 用户信息（P0.3 完成后将由 user store 提供）
-const username = computed(() => {
-  try {
-    const saved = localStorage.getItem('user')
-    if (saved) {
-      return JSON.parse(saved).username || 'admin'
-    }
-  } catch {
-    // ignore parse error
-  }
-  return 'admin'
-})
+const username = computed(() => userStore.username || 'admin')
 
 const handleMenuClick = ({ key }: { key: string }) => {
   if (key.startsWith('/')) {
@@ -95,9 +86,7 @@ const handleMenuClick = ({ key }: { key: string }) => {
 }
 
 const handleLogout = () => {
-  localStorage.removeItem('access_token')
-  localStorage.removeItem('refresh_token')
-  localStorage.removeItem('user')
+  userStore.logout()
   router.push('/login')
 }
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index d0bd646..850af3d 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -7,6 +7,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
 import App from './App.vue'
+import { setTokenGetter } from './utils/request'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -19,6 +20,10 @@ const app = createApp(App)
 app.use(pinia)
 app.use(router)
 
+// 注入 token 获取函数，使 request.ts 能读取内存中的 token（remember=false 场景）
+import { useUserStore } from './stores/user'
+setTokenGetter(() => useUserStore().token)
+
 // 路由守卫
 const authWhitelist = ['/login', '/register']
 
diff --git a/frontend/src/pages/login.vue b/frontend/src/pages/login.vue
index d8dda90..0526927 100644
--- a/frontend/src/pages/login.vue
+++ b/frontend/src/pages/login.vue
@@ -2,6 +2,9 @@
 import Brand from '@/components/Brand.vue'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import { useUserStore } from '@/stores/user'
+import { api } from '@/utils/request'
+import { ApiError } from '@/types/api'
+import type { UserInfo } from '@/stores/user'
 
 const formState = reactive({
   username: '',
@@ -29,33 +32,33 @@ const handleSubmit = async () => {
     await formRef.value.validate()
     loading.value = true
 
-    const response = await fetch('/api/auth/login', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        username: formState.username,
-        password: formState.password,
-      }),
+    const data = await api.post<{
+      access_token: string
+      refresh_token: string
+      user: UserInfo
+    }>('/api/auth/login', {
+      username: formState.username,
+      password: formState.password,
     })
 
-    const data = await response.json()
+    userStore.setToken(data.access_token, data.refresh_token, formState.remember)
+    userStore.setUser(data.user)
 
-    if (data.code === 0) {
-      userStore.setToken(data.data.access_token, data.data.refresh_token)
-      userStore.setUser(data.data.user)
-
-      message.success('登录成功！')
-      const redirect = (route.query.redirect as string) || '/'
-      setTimeout(() => {
-        router.push(redirect)
-      }, 500)
-    } else {
-      message.error(data.message || '登录失败，请重试')
-    }
+    message.success('登录成功！')
+    // 校验 redirect 防止开放重定向漏洞
+    const redirect = (route.query.redirect as string) || '/'
+    const safeRedirect = redirect.startsWith('/') && !redirect.includes('//') ? redirect : '/'
+    setTimeout(() => {
+      router.push(safeRedirect)
+    }, 500)
   } catch (error: unknown) {
     if (error && typeof error === 'object' && 'errorFields' in error) {
       return
     }
+    if (error instanceof ApiError) {
+      message.error(error.message)
+      return
+    }
     console.error('登录错误：', error)
     message.error('登录失败，请检查网络连接')
   } finally {
diff --git a/frontend/src/pages/register.vue b/frontend/src/pages/register.vue
index a8cb6a1..8a3ac99 100644
--- a/frontend/src/pages/register.vue
+++ b/frontend/src/pages/register.vue
@@ -2,6 +2,9 @@
 import Brand from '@/components/Brand.vue'
 import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons-vue'
 import { useUserStore } from '@/stores/user'
+import { api } from '@/utils/request'
+import { ApiError } from '@/types/api'
+import type { UserInfo } from '@/stores/user'
 
 const formState = reactive({
   username: '',
@@ -47,38 +50,36 @@ const handleSubmit = async () => {
     await formRef.value.validate()
     loading.value = true
 
-    const response = await fetch('/api/auth/register', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        username: formState.username,
-        email: formState.email,
-        password: formState.password,
-      }),
+    const data = await api.post<{
+      access_token?: string
+      refresh_token?: string
+      user?: UserInfo
+    }>('/api/auth/register', {
+      username: formState.username,
+      email: formState.email,
+      password: formState.password,
     })
 
-    const data = await response.json()
-
-    if (data.code === 0) {
-      // 注册成功后自动设置 token（如果后端返回）
-      if (data.data?.access_token) {
-        userStore.setToken(data.data.access_token, data.data.refresh_token)
-        if (data.data.user) {
-          userStore.setUser(data.data.user)
-        }
+    // 注册成功后自动设置 token（如果后端返回）
+    if (data?.access_token) {
+      userStore.setToken(data.access_token, data.refresh_token!)
+      if (data.user) {
+        userStore.setUser(data.user)
       }
-
-      message.success('注册成功！即将跳转到登录页...')
-      setTimeout(() => {
-        router.push('/login')
-      }, 1500)
-    } else {
-      message.error(data.message || '注册失败，请重试')
     }
+
+    message.success('注册成功！即将跳转到登录页...')
+    setTimeout(() => {
+      router.push('/login')
+    }, 1500)
   } catch (error: unknown) {
     if (error && typeof error === 'object' && 'errorFields' in error) {
       return
     }
+    if (error instanceof ApiError) {
+      message.error(error.message)
+      return
+    }
     console.error('注册错误：', error)
     message.error('注册失败，请检查网络连接')
   } finally {
diff --git a/frontend/src/stores/user.ts b/frontend/src/stores/user.ts
index 0752e81..8b37d42 100644
--- a/frontend/src/stores/user.ts
+++ b/frontend/src/stores/user.ts
@@ -13,15 +13,25 @@ export const useUserStore = defineStore('user', () => {
   const refreshToken = ref<string | null>(localStorage.getItem('refresh_token'))
   const user = ref<UserInfo | null>(null)
 
-  const isLoggedIn = computed(() => !!token.value)
+  // 基本 JWT 格式校验（三段式），防止垃圾值绕过路由守卫
+  const isLoggedIn = computed(() => {
+    const t = token.value
+    return !!t && t.split('.').length === 3
+  })
   const isAdmin = computed(() => user.value?.role === 'admin')
   const username = computed(() => user.value?.username || '')
 
-  function setToken(accessToken: string, newRefreshToken: string) {
+  function setToken(accessToken: string, newRefreshToken: string, remember = true) {
     token.value = accessToken
     refreshToken.value = newRefreshToken
-    localStorage.setItem('access_token', accessToken)
-    localStorage.setItem('refresh_token', newRefreshToken)
+    if (remember) {
+      localStorage.setItem('access_token', accessToken)
+      localStorage.setItem('refresh_token', newRefreshToken)
+    } else {
+      // 不记住：清除持久化，token 仅存于内存，关闭标签页即失效
+      localStorage.removeItem('access_token')
+      localStorage.removeItem('refresh_token')
+    }
   }
 
   function setUser(info: UserInfo) {
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index 014ffc0..fa4cfe1 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -1,11 +1,20 @@
 import { ApiError } from '@/types/api'
 
+const DEFAULT_TIMEOUT = 15000
+
+// 允许外部注入 token 获取函数，避免与 store 循环依赖
+let tokenGetter: (() => string | null) | null = null
+export function setTokenGetter(fn: () => string | null) {
+  tokenGetter = fn
+}
+
 interface RequestOptions extends RequestInit {
   params?: Record<string, unknown>
+  timeout?: number
 }
 
 async function request<T = unknown>(url: string, options: RequestOptions = {}): Promise<T> {
-  const token = localStorage.getItem('access_token')
+  const token = tokenGetter?.() ?? localStorage.getItem('access_token')
 
   const headers: Record<string, string> = {
     'Content-Type': 'application/json',
@@ -27,28 +36,54 @@ async function request<T = unknown>(url: string, options: RequestOptions = {}):
     url = `${url}${separator}${query}`
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { params: _params, ...fetchOptions } = options
+  const { params: _params, timeout: _timeout, ...fetchOptions } = options
 
-  const response = await fetch(url, { ...fetchOptions, headers })
+  // 超时控制
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), options.timeout ?? DEFAULT_TIMEOUT)
 
-  // 401 未授权
-  if (response.status === 401) {
-    localStorage.removeItem('access_token')
-    localStorage.removeItem('refresh_token')
-    localStorage.removeItem('user')
-    window.location.href = '/login'
-    throw new ApiError('登录已过期，请重新登录', 401)
+  try {
+    const response = await fetch(url, {
+      ...fetchOptions,
+      headers,
+      signal: controller.signal,
+    })
+
+    // 401 未授权：保留当前路径作为 redirect 参数
+    if (response.status === 401) {
+      localStorage.removeItem('access_token')
+      localStorage.removeItem('refresh_token')
+      localStorage.removeItem('user')
+      const redirect = encodeURIComponent(
+        window.location.pathname + window.location.search,
+      )
+      window.location.href = `/login?redirect=${redirect}`
+      throw new ApiError('登录已过期，请重新登录', 401)
+    }
+
+    // 防护非 JSON 响应（如网关 HTML 错误页）
+    let result
+    try {
+      result = await response.json()
+    } catch {
+      throw new ApiError('服务器返回了非预期的响应格式', response.status)
+    }
+
+    // 业务错误
+    if (result.code !== 0) {
+      throw new ApiError(result.message || '请求失败', result.code)
+    }
+
+    return result.data
+  } catch (error) {
+    if (error instanceof ApiError) throw error
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new ApiError('请求超时，请检查网络连接', 0)
+    }
+    throw error
+  } finally {
+    clearTimeout(timeoutId)
   }
-
-  const result = await response.json()
-
-  // 业务错误
-  if (result.code !== 0) {
-    throw new ApiError(result.message || '请求失败', result.code)
-  }
-
-  return result.data
 }
 
 export const api = {