From 476f4ad826992467b886a850b8bafea416030ed0 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 25 Dec 2025 18:48:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(auth):=20=E4=BC=98=E5=8C=96=20ProtectedRout?=
 =?UTF-8?q?e=20=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81=E5=92=8C=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 PageLoader 替换白色加载背景
- 未登录时不渲染子组件，显示加载状态
- 登录成功后才显示受保护内容

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/ProtectedRoute.js         | 22 ++++------------------
 src/components/ProtectedRouteRedirect.js | 17 ++---------------
 2 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/src/components/ProtectedRoute.js b/src/components/ProtectedRoute.js
index cb9716f0..86996bb2 100755
--- a/src/components/ProtectedRoute.js
+++ b/src/components/ProtectedRoute.js
@@ -1,8 +1,8 @@
 // src/components/ProtectedRoute.js - 弹窗拦截版本
 import React, { useEffect, useRef } from 'react';
-import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
 import { useAuth } from '../contexts/AuthContext';
 import { useAuthModal } from '../hooks/useAuthModal';
+import PageLoader from './Loading/PageLoader';
 
 const ProtectedRoute = ({ children }) => {
   const { isAuthenticated, isLoading, user } = useAuth();
@@ -22,26 +22,12 @@ const ProtectedRoute = ({ children }) => {
 
   // 显示加载状态
   if (isLoading) {
-    return (
-        <Box
-            height="100vh"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            bg="gray.50"
-        >
-          <VStack spacing={4}>
-            <Spinner size="xl" color="blue.500" thickness="4px" />
-            <Text fontSize="lg" color="gray.600">正在验证登录状态...</Text>
-          </VStack>
-        </Box>
-    );
+    return <PageLoader message="正在验证登录状态..." />;
   }
 
-  // 未登录时，渲染子组件 + 自动打开弹窗（通过 useEffect）
-  // 弹窗会在 useEffect 中自动触发，页面正常显示
+  // 未登录时，显示加载状态 + 自动弹出认证弹窗（通过 useEffect）
   if (!isAuthenticated || !user) {
-    return children;
+    return <PageLoader message="请登录后访问..." />;
   }
 
   // 已登录，渲染子组件
diff --git a/src/components/ProtectedRouteRedirect.js b/src/components/ProtectedRouteRedirect.js
index 34d95b0a..1b459e09 100644
--- a/src/components/ProtectedRouteRedirect.js
+++ b/src/components/ProtectedRouteRedirect.js
@@ -2,28 +2,15 @@
 // 未登录时跳转到首页，用于三级页面（详情页）
 import React from 'react';
 import { Navigate } from 'react-router-dom';
-import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
 import { useAuth } from '../contexts/AuthContext';
+import PageLoader from './Loading/PageLoader';
 
 const ProtectedRouteRedirect = ({ children }) => {
   const { isAuthenticated, isLoading, user } = useAuth();
 
   // 显示加载状态
   if (isLoading) {
-    return (
-      <Box
-        height="100vh"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        bg="gray.50"
-      >
-        <VStack spacing={4}>
-          <Spinner size="xl" color="blue.500" thickness="4px" />
-          <Text fontSize="lg" color="gray.600">正在验证登录状态...</Text>
-        </VStack>
-      </Box>
-    );
+    return <PageLoader message="正在验证登录状态..." />;
   }
 
   // 未登录，直接跳转到首页