修复退出登录重定向问题和相关功能优化

- 修复DashboardLayout中的退出登录函数，确保清除所有认证信息 - 恢复_app.tsx中的认证逻辑，确保仪表盘页面需要登录访问 - 完善退出登录流程：清除本地存储 -> 调用登出API -> 重定向到登录页面 - 添加错误边界组件提升用户体验 - 优化React水合错误处理 - 添加JWT令牌验证API - 完善各个仪表盘页面的功能和样式
2025-07-03 20:56:17 +08:00
parent 211e0306b5
commit 1ba859196a
17 changed files with 1656 additions and 462 deletions
@@ -0,0 +1,99 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { hydrationDebug } from '../utils/hydrationDebug';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    // 更新 state 使下一次渲染能够显示降级后的 UI
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    
+    // 使用调试工具记录水合错误
+    if (error.message.includes('hydration') || error.message.includes('Hydration')) {
+      hydrationDebug.logHydrationError(error, 'ErrorBoundary');
+    }
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      // 自定义降级 UI
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50">
+          <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
+            <div className="flex items-center mb-4">
+              <div className="flex-shrink-0">
+                <svg className="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <h3 className="text-lg font-medium text-gray-900">
+                  页面加载出错
+                </h3>
+              </div>
+            </div>
+            <div className="mb-4">
+              <p className="text-sm text-gray-600">
+                抱歉，页面加载时出现了问题。这可能是由于网络连接或浏览器兼容性问题导致的。
+              </p>
+              {this.state.error?.message.includes('hydration') && (
+                <p className="text-sm text-amber-600 mt-2">
+                  检测到水合错误。请尝试刷新页面或清除浏览器缓存。
+                </p>
+              )}
+            </div>
+            <div className="flex space-x-3">
+              <button
+                onClick={() => window.location.reload()}
+                className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                刷新页面
+              </button>
+              <button
+                onClick={() => window.history.back()}
+                className="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"
+              >
+                返回上一页
+              </button>
+            </div>
+            {process.env.NODE_ENV === 'development' && this.state.error && (
+              <details className="mt-4">
+                <summary className="text-sm text-gray-500 cursor-pointer">
+                  查看错误详情
+                </summary>
+                <pre className="mt-2 text-xs text-red-600 bg-red-50 p-2 rounded overflow-auto">
+                  {this.state.error.message}
+                  {this.state.error.stack}
+                </pre>
+              </details>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary; 
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
+import useClientMount from '../utils/useClientMount';
 import { 
  HomeIcon, 
  UsersIcon, 
@@ -50,9 +51,13 @@ export default function Layout({ children, user }: LayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [isDemoMode, setIsDemoMode] = useState(false);
  const [expandedItems, setExpandedItems] = useState<string[]>([]);
+  const isClient = useClientMount();
  const router = useRouter();

  useEffect(() => {
+    // 只在客户端执行
+    if (!isClient) return;
+    
    const checkDemoMode = () => {
      const isDemo = !process.env.NEXT_PUBLIC_SUPABASE_URL || 
                     process.env.NEXT_PUBLIC_SUPABASE_URL === 'https://demo.supabase.co' ||
@@ -61,7 +66,7 @@ export default function Layout({ children, user }: LayoutProps) {
    };

    checkDemoMode();
-  }, []);
+  }, [isClient]);

  const handleLogout = () => {
    if (isDemoMode) {
@@ -159,6 +164,23 @@ export default function Layout({ children, user }: LayoutProps) {
    );
  };

+  // 在客户端挂载之前，返回一个简单的布局以避免水合错误
+  if (!isClient) {
+    return (
+      <div className="h-screen flex overflow-hidden bg-gray-100" suppressHydrationWarning>
+        <div className="flex-1 flex flex-col">
+          <main className="flex-1 relative overflow-y-auto focus:outline-none">
+            <div className="py-6">
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+                {children}
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div className="h-screen flex overflow-hidden bg-gray-100">
      {/* 移动端侧边栏 */}
@@ -60,11 +60,32 @@ export default function DashboardLayout({ children, title = '管理后台' }: Da
    setIsDemoMode(true);
  }, []);

-  const handleLogout = () => {
-    // 清除本地存储并跳转到登录页
-    localStorage.removeItem('access_token');
-    localStorage.removeItem('user');
-    router.push('/auth/login');
+  const handleLogout = async () => {
+    try {
+      // 清除所有相关的本地存储
+      localStorage.removeItem('access_token');
+      localStorage.removeItem('adminToken');
+      localStorage.removeItem('user');
+      
+      // 调用后端登出API（如果需要）
+      try {
+        await fetch('/api/auth/logout', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+      } catch (apiError) {
+        console.log('API logout error (non-critical):', apiError);
+      }
+      
+      // 重定向到登录页面
+      window.location.href = '/auth/login';
+    } catch (error) {
+      console.error('Logout error:', error);
+      // 即使出错也要重定向到登录页面
+      window.location.href = '/auth/login';
+    }
  };

  const toggleExpanded = (itemName: string) => {