From a2cef00908db34a1b69863e738edbe225863e2af Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:20:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9C=AA=E7=99=BB=E5=BD=95=E8=AE=BF?=
 =?UTF-8?q?=E9=97=AE=E7=AE=A1=E7=90=86=E5=90=8E=E5=8F=B0=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E9=97=AA=E7=8E=B0=E9=A1=B5=E9=9D=A2=EF=BC=8C=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=AE=88=E5=8D=AB=E6=94=B9=E4=B8=BA=E6=9C=8D=E5=8A=A1=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 守卫先经 /profile 校验 token 有效后才放行受保护路由，无效 token 直接跳登录并带 redirect 回跳
- DashboardLayout 用户信息就绪前只渲染 spinner，不渲染后台内容
- manager 路由增加 requiresAdmin 校验（role >= 10），非管理员重定向回仪表盘
- 401 拦截器改用 router.push 软跳转，避免整页刷新与双重跳转
- pinia 先于 router 安装；登录页支持 redirect 参数回跳原目标
---
 frontend/src/api/client.ts               |  8 +++++-
 frontend/src/layouts/DashboardLayout.vue |  6 ++++-
 frontend/src/main.ts                     |  2 +-
 frontend/src/router/index.ts             | 34 +++++++++++++++++++-----
 frontend/src/utils/router_menu.ts        |  3 ++-
 frontend/src/views/auth/Login.vue        | 10 ++++---
 6 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 4766f91..30d9814 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -2,6 +2,7 @@
 import axios from 'axios'
 import type { AxiosError, InternalAxiosRequestConfig } from 'axios'
 import { useAuthStore } from '@/stores/auth'
+import router from '@/router'
 
 const baseURL = import.meta.env.VITE_API_BASE_URL || '/api'
 if (import.meta.env.DEV) { // Vite 的方式判断开发环境
@@ -49,7 +50,12 @@ service.interceptors.response.use(
     if (error.response && error.response.status === 401) {
       const authStore = useAuthStore();
       authStore.clear();
-      window.location.href = '/login';
+      // 守卫校验期间（尚未进入受保护路由）由守卫负责跳登录；
+      // 这里只处理已登录状态下 token 失效的情况，且不再用 location.href 硬刷新
+      const current = router.currentRoute.value;
+      if (current.matched.some(record => record.meta.requiresAuth)) {
+        router.push({ path: '/login', query: { redirect: current.fullPath } });
+      }
     }
     return Promise.reject(error);
   }
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 09d24a6..56a4953 100644
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -1,6 +1,10 @@
 <!-- src/layouts/DashboardLayout.vue -->
 <template>
-  <div class="min-h-screen bg-base-200">
+  <!-- 用户信息就绪前不渲染后台内容，避免未授权内容闪现 -->
+  <div v-if="!authStore.user" class="flex min-h-screen items-center justify-center bg-base-200">
+    <span class="loading loading-spinner loading-lg text-base-content/30"></span>
+  </div>
+  <div v-else class="min-h-screen bg-base-200">
     <div class="drawer" :class="{ 'lg:drawer-open': isLargeSidebarOpen }">
       <input id="ot-drawer" type="checkbox" class="drawer-toggle" />
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5670f45..35f6a53 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -10,6 +10,6 @@ const pinia = createPinia()
 const app = createApp(App)
 
 app.provide('request', request)
+app.use(pinia) // 必须先于 router：路由守卫里会用到 auth store
 app.use(router)
-app.use(pinia)
 app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d69d2a4..37697fe 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,19 +1,41 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/utils/router_menu'
+import { useAuthStore } from '@/stores/auth'
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
 })
 
-router.beforeEach((to, from, next) => {
-  const isAuthenticated = localStorage.getItem('token')
+// 受保护页面必须先通过服务端校验才渲染：
+// 本地 token 存在不代表有效（可能已过期/被重置），若只查 localStorage，
+// 页面会先渲染约 1 秒、等 /profile 返回 401 后才被踢回登录页。
+router.beforeEach(async (to) => {
   const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
-  if (requiresAuth && !isAuthenticated) {
-    next('/login')
-  } else {
-    next()
+  if (!requiresAuth) return true
+
+  const authStore = useAuthStore()
+
+  if (!authStore.token) {
+    return { path: '/login', query: { redirect: to.fullPath } }
   }
+
+  // 有 token 但还没加载用户信息时，先向服务端确认身份，失败则不得进入
+  if (!authStore.user) {
+    try {
+      await authStore.getProfile()
+    } catch {
+      authStore.clear()
+      return { path: '/login', query: { redirect: to.fullPath } }
+    }
+  }
+
+  // 管理后台仅对 role >= 10 开放
+  if (to.matched.some(record => record.meta.requiresAdmin) && (authStore.user?.role ?? 0) < 10) {
+    return '/dashboard/overview'
+  }
+
+  return true
 })
 
 export default router
diff --git a/frontend/src/utils/router_menu.ts b/frontend/src/utils/router_menu.ts
index d972991..43159bc 100644
--- a/frontend/src/utils/router_menu.ts
+++ b/frontend/src/utils/router_menu.ts
@@ -20,6 +20,7 @@ declare module 'vue-router' {
     icon?: Component
     showInSidebar?: boolean
     requiresAuth?: boolean
+    requiresAdmin?: boolean
     open?: boolean
     badge?: string
   }
@@ -46,7 +47,7 @@ export const routes: RouteRecordRaw[] = [
       {
         path: 'manager',
         name: 'Manager',
-        meta: { title: '管理后台' },
+        meta: { title: '管理后台', requiresAdmin: true },
         redirect: '/dashboard/manager/users',
         children: [
           { path: 'users', name: 'User', component: () => import('@/views/dashboard/User.vue'), meta: { title: '用户管理' } },
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index 518a8fe..b1ceabe 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -62,17 +62,21 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { CircleAlert } from '@lucide/vue'
 import { useAuthStore } from '@/stores/auth';
 import { useWebAuthStore } from '@/stores/webauth';
 import { useToast } from '@/composables/toast';
 
 const router = useRouter()
+const route = useRoute()
 const authStore = useAuthStore();
 const webauthStore = useWebAuthStore();
 const { setToast } = useToast();
 
+// 被守卫拦下时带上原始目标，登录成功后回跳
+const redirectPath = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
+
 const error = ref<string | null>(null)
 const loggingIn = ref(false)
 const user = reactive({
@@ -113,7 +117,7 @@ const handleLogin = async () => {
         localStorage.removeItem('rember');
       }
       setToast('Logged in successfully.', 'success');
-      router.push('/dashboard');
+      router.push(redirectPath);
     }
   } catch (err: any) {
     console.error('Login error:', err);
@@ -130,7 +134,7 @@ const handlePasskeyLogin = async () => {
     const res = await webauthStore.loginPasskey();
     if (!!res?.code && res.code === 200) {
       setToast('Logged in successfully.', 'success');
-      router.push('/dashboard');
+      router.push(redirectPath);
     }
   } catch (err: any) {
     console.error('Passkey login error:', err);