生产管理系统 - 路由错误修复

crop-x/src/components/auth/AuthContext.tsx

@@ -236,8 +236,20 @@ export function AuthProvider({ children }: AuthProviderProps) {
     }
   };
 
-  // 初始化时检查 localStorage并验证用户
+  // 统一的认证初始化和路由监听
   React.useEffect(() => {
+    // 处理当前路径的逻辑
+    const handleCurrentPath = () => {
+      const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';
+
+      // 如果在登录页面，跳过验证，直接设置为非加载状态
+      if (currentPath.startsWith('/login')) {
+        console.log('📄 检测到登录页面，跳过用户验证');
+        stopTokenRefresh(); // 停止任何正在进行的 token 刷新
+        setLoading(false);
+        return;
+      }
+
       // 检查是否有存储的用户信息和 token，并设置 cookie
       const storedUser = localStorage.getItem('user');
       if (storedUser) {
@@ -253,7 +265,25 @@ export function AuthProvider({ children }: AuthProviderProps) {
         }
       }
 
+      // 只有在非登录页面才进行用户验证
       validateUser();
+    };
+
+    // 立即处理当前路径
+    handleCurrentPath();
+
+    // 监听路由变化
+    const handlePathChange = () => {
+      console.log('🔄 路由变化，重新检查认证状态');
+      handleCurrentPath();
+    };
+
+    // 监听 popstate 事件（浏览器前进后退）
+    window.addEventListener('popstate', handlePathChange);
+
+    return () => {
+      window.removeEventListener('popstate', handlePathChange);
+    };
   }, []);
 
   // 清理定时器

crop-x/src/components/layouts/Navbar.tsx

@@ -5,10 +5,9 @@ import { Sprout, Map, Clipboard, Package, Brain, Droplets, Settings } from 'luci
 import { MessageBell } from './components/MessageBell';
 import { UserProfile } from './components/UserProfile';
 import { ThemeToggle } from './ThemeToggle';
-import { AuthProvider } from './components/auth/AuthContext';
 import { useElementHeight } from '@/hooks/useElementHeight';
 import { useViewHeight } from '@/hooks/useViewHeight';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useRef, useEffect, useState } from 'react';
 // 注释掉 Accordion 相关导入，因为不再需要二级菜单
 // import {
@@ -69,6 +68,7 @@ const Navbar1 = ({ navbarData }: Navbar1Props) => {
     const menu = navbarData.menu
     const auth = navbarData.auth
     const pathname = usePathname()
+    const router = useRouter()
     const containerStyle = {
       maxWidth:"100%",marginLeft:"0px",marginRight:"0px",paddingLeft:"1rem",paddingRight:"0rem"
     }
@@ -107,7 +107,6 @@ const Navbar1 = ({ navbarData }: Navbar1Props) => {
   };
 
   return (
-    <AuthProvider>
     <section className="py-4" ref={elementRef}>
         <div className="container" style = {containerStyle}>
         {/* Desktop Menu */}
@@ -151,7 +150,7 @@ const Navbar1 = ({ navbarData }: Navbar1Props) => {
         `}</style>
               <NavigationMenu>
                 <NavigationMenuList className="flex gap-1 min-w-max">
-                  {menu.map((item) => renderMenuItem(item, isMenuActive))}
+                  {menu.map((item) => renderMenuItem(item, isMenuActive, router))}
                 </NavigationMenuList>
               </NavigationMenu>
             </div>
@@ -195,7 +194,7 @@ const Navbar1 = ({ navbarData }: Navbar1Props) => {
                 <div className="flex flex-col gap-6 p-4">
                   {/* 简化移动端菜单，不再使用 Accordion */}
                   <div className="flex w-full flex-col gap-4">
-                    {menu.map((item) => renderMobileMenuItem(item, isMenuActive))}
+                    {menu.map((item) => renderMobileMenuItem(item, isMenuActive, router))}
                   </div>
 
                   <div className="flex flex-col gap-3">
@@ -216,11 +215,10 @@ const Navbar1 = ({ navbarData }: Navbar1Props) => {
         </div>
       </div>
     </section>
-    </AuthProvider>
   );
 };
 
-const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean) => {
+const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean, router: any) => {
   // 注释掉二级菜单相关代码，项目不需要二级菜单
   // if (item.items) {
   //   return (
@@ -238,14 +236,20 @@ const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean)
   //   );
   // }
 
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    router.push(item.url);
+  };
+
   return (
     <NavigationMenuItem key={item.title}>
       <NavigationMenuLink
         href={item.url}
+        onClick={handleClick}
         data-menu-item="true"
         data-menu-url={item.url}
         className={`
-          inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium gap-2 whitespace-nowrap relative
+          inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium gap-2 whitespace-nowrap relative cursor-pointer
           ${isMenuActive(item.url)
             ? 'bg-primary/10'
             : 'bg-background hover:bg-muted hover:text-accent-foreground'
@@ -275,7 +279,7 @@ const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean)
   );
 };
 
-const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean) => {
+const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean, router: any) => {
   // 注释掉移动端二级菜单相关代码
   // if (item.items) {
   //   return (
@@ -293,12 +297,17 @@ const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boo
   //   );
   // }
 
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    router.push(item.url);
+  };
+
   return (
-    <a
+    <div
       key={item.title}
-      href={item.url}
+      onClick={handleClick}
       className={`
-        text-md font-semibold flex items-center gap-2 p-2 rounded-md transition-colors
+        text-md font-semibold flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer
         ${isMenuActive(item.url)
           ? 'bg-primary/10 text-primary'
           : 'hover:bg-muted hover:text-accent-foreground'
@@ -316,7 +325,7 @@ const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boo
       <span className={isMenuActive(item.url) ? 'text-primary' : ''}>
         {item.title}
       </span>
-    </a>
+    </div>
   );
 };
 

crop-x/src/components/layouts/components/MessageBell.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { Bell, CheckCircle, X } from 'lucide-react';
-import { useAuth } from './auth/AuthContext';
 import { toast } from 'sonner';
 import { Badge } from './ui/badge';
 import { Button } from './ui/button';
@@ -25,7 +24,6 @@ interface MessageBellProps {
 }
 
 export function MessageBell({ onMessageClick }: MessageBellProps) {
-  const { authState } = useAuth();
   const [showMessages, setShowMessages] = useState(false);
   const [showMessageDetail, setShowMessageDetail] = useState(false);
   const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);