生产管理系统 - 未登录拦截客户端中间件开发

2025-10-31 17:34:23 +08:00
parent 0df19c9cfb
commit a1b3335664
3 changed files with 80 additions and 77 deletions
--- a/crop-x/src/components/auth/ClientAuthInterceptor.tsx
+++ b/crop-x/src/components/auth/ClientAuthInterceptor.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from './AuthContext';
+
+interface ClientAuthInterceptorProps {
+  children: React.ReactNode;
+}
+
+export function ClientAuthInterceptor({ children }: ClientAuthInterceptorProps) {
+  const { user, isAuthenticated, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    // 如果正在加载，等待加载完成
+    if (loading) {
+      return;
+    }
+
+    const currentPath = window.location.pathname;
+
+    // 如果已经在登录页面，不需要重定向
+    if (currentPath === '/login' || currentPath === '/register') {
+      console.log(`📄 已在认证页面，跳过拦截: ${currentPath}`);
+      return;
+    }
+
+    // 如果未认证，重定向到登录页
+    if (!isAuthenticated) {
+      console.log(`🔒 客户端拦截：未认证用户访问 ${currentPath}，重定向到登录页`);
+
+      // 保存当前路径，登录后可以跳转回来
+      const loginUrl = `/login${currentPath !== '/' ? `?redirect=${encodeURIComponent(currentPath)}` : ''}`;
+      router.push(loginUrl);
+      return;
+    }
+
+    console.log(`✅ 客户端认证通过：用户 ${user?.username} 访问 ${window.location.pathname}`);
+  }, [isAuthenticated, loading, user, router]);
+
+  const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';
+
+  // 如果正在加载，显示加载状态
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
+          <p className="text-gray-600">验证用户身份中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 如果在认证页面（登录/注册），直接渲染子组件，不需要认证检查
+  if (currentPath === '/login' || currentPath === '/register') {
+    return <>{children}</>;
+  }
+
+  // 如果未认证且不在认证页面，显示跳转状态
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mb-4"></div>
+          <p className="text-gray-600">正在跳转到登录页...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 认证通过，渲染子组件
+  return <>{children}</>;
+}