Refactor auth and version checks for improved reliability.

- Prevent duplicate version checks in Vite dev mode
- Simplify protected route handling
- Add session flags for version tracking

lightrag_webui/src/AppRouter.tsx

@@ -2,98 +2,11 @@ import { HashRouter as Router, Routes, Route, useNavigate } from 'react-router-d
 import { useEffect, useState } from 'react'
 import { useAuthStore } from '@/stores/state'
 import { navigationService } from '@/services/navigation'
-import { getAuthStatus } from '@/api/lightrag'
-import { toast } from 'sonner'
 import { Toaster } from 'sonner'
 import App from './App'
 import LoginPage from '@/features/LoginPage'
 import ThemeProvider from '@/components/ThemeProvider'
 
-interface ProtectedRouteProps {
-  children: React.ReactNode
-}
-
-const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
-  const { isAuthenticated } = useAuthStore()
-  const [isChecking, setIsChecking] = useState(true)
-  const navigate = useNavigate()
-
-  // Set navigate function for navigation service
-  useEffect(() => {
-    navigationService.setNavigate(navigate)
-  }, [navigate])
-
-  useEffect(() => {
-    let isMounted = true; // Flag to prevent state updates after unmount
-
-    // This effect will run when the component mounts
-    // and will check if authentication is required
-    const checkAuthStatus = async () => {
-      try {
-        // Skip check if already authenticated
-        if (isAuthenticated) {
-          if (isMounted) setIsChecking(false);
-          return;
-        }
-
-        const status = await getAuthStatus()
-
-        // Only proceed if component is still mounted
-        if (!isMounted) return;
-
-        if (!status.auth_configured && status.access_token) {
-          // If auth is not configured, use the guest token
-          useAuthStore.getState().login(status.access_token, true, status.core_version, status.api_version)
-          if (status.message) {
-            toast.info(status.message)
-          }
-        }
-      } catch (error) {
-        console.error('Failed to check auth status:', error)
-      } finally {
-        // Only update state if component is still mounted
-        if (isMounted) {
-          setIsChecking(false)
-        }
-      }
-    }
-
-    // Execute immediately
-    checkAuthStatus()
-
-    // Cleanup function to prevent state updates after unmount
-    return () => {
-      isMounted = false;
-    }
-  }, [isAuthenticated])
-
-  // Handle navigation when authentication status changes
-  useEffect(() => {
-    if (!isChecking && !isAuthenticated) {
-      const currentPath = window.location.hash.slice(1); // Remove the '#' from hash
-      const isLoginPage = currentPath === '/login';
-
-      if (!isLoginPage) {
-        // Use navigation service for redirection
-        console.log('Not authenticated, redirecting to login');
-        navigationService.navigateToLogin();
-      }
-    }
-  }, [isChecking, isAuthenticated]);
-
-  // Show nothing while checking auth status or when not authenticated on login page
-  if (isChecking || (!isAuthenticated && window.location.hash.slice(1) === '/login')) {
-    return null;
-  }
-
-  // Show children only when authenticated
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  return <>{children}</>;
-}
-
 const AppContent = () => {
   const [initializing, setInitializing] = useState(true)
   const { isAuthenticated } = useAuthStore()
@@ -104,34 +17,20 @@ const AppContent = () => {
     navigationService.setNavigate(navigate)
   }, [navigate])
 
-  // Check token validity and auth configuration on app initialization
+  // Token validity check
   useEffect(() => {
-    let isMounted = true; // Flag to prevent state updates after unmount
+    let isMounted = true;
 
     const checkAuth = async () => {
       try {
         const token = localStorage.getItem('LIGHTRAG-API-TOKEN')
 
-        // If we have a token, we're already authenticated
         if (token && isAuthenticated) {
           if (isMounted) setInitializing(false);
           return;
         }
 
-        // If no token or not authenticated, check if auth is configured
-        const status = await getAuthStatus()
-
-        // Only proceed if component is still mounted
-        if (!isMounted) return;
-
-        if (!status.auth_configured && status.access_token) {
-          // If auth is not configured, use the guest token
-          useAuthStore.getState().login(status.access_token, true, status.core_version, status.api_version)
-          if (status.message) {
-            toast.info(status.message)
-          }
-        } else if (!token) {
-          // Only logout if we don't have a token
+        if (!token) {
           useAuthStore.getState().logout()
         }
       } catch (error) {
@@ -140,22 +39,30 @@ const AppContent = () => {
           useAuthStore.getState().logout()
         }
       } finally {
-        // Only update state if component is still mounted
         if (isMounted) {
           setInitializing(false)
         }
       }
     }
 
-    // Execute immediately
     checkAuth()
 
-    // Cleanup function to prevent state updates after unmount
     return () => {
       isMounted = false;
     }
   }, [isAuthenticated])
 
+  // Redirect effect for protected routes
+  useEffect(() => {
+    if (!initializing && !isAuthenticated) {
+      const currentPath = window.location.hash.slice(1);
+      if (currentPath !== '/login') {
+        console.log('Not authenticated, redirecting to login');
+        navigate('/login');
+      }
+    }
+  }, [initializing, isAuthenticated, navigate]);
+
   // Show nothing while initializing
   if (initializing) {
     return null
@@ -166,11 +73,7 @@ const AppContent = () => {
       <Route path="/login" element={<LoginPage />} />
       <Route
         path="/*"
-        element={
-          <ProtectedRoute>
-            <App />
-          </ProtectedRoute>
-        }
+        element={isAuthenticated ? <App /> : null}
       />
     </Routes>
   )