wpic-dev/datahub
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix auth security: add request timeout, safe redirects, and memory-only token support.

Browse Source
This commit is contained in:
Nick Zeng
2026-03-18 14:55:37 +08:00
parent 2b1a2f0c28
commit 257668f3f3
6 changed files with 126 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layouts/MainLayout.vue
+4 -15
View File
@@ -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')
}
frontend/src/main.ts
+5
View File
@@ -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']
frontend/src/pages/login.vue
+23 -20
View File
@@ -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 {
frontend/src/pages/register.vue
+25 -24
View File
@@ -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 {
frontend/src/stores/user.ts
+14 -4
View File
@@ -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) {
frontend/src/utils/request.ts
+55 -20
View File
@@ -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 = {