fix: Blank page issue - improve auth loading state and error handling
- Fixed AuthContext to properly set user to null on auth check failure - Added loading spinner in PrivateRoute instead of returning null - Removed automatic redirect from API interceptor (let React Router handle it) - Improved error handling in checkAuth to prevent stuck loading state
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
|
import { ThemeProvider, createTheme, CssBaseline, Box, CircularProgress } from '@mui/material';
|
||||||
import { AuthProvider, useAuth } from './context/AuthContext';
|
import { AuthProvider, useAuth } from './context/AuthContext';
|
||||||
import Layout from './components/Layout/Layout';
|
import Layout from './components/Layout/Layout';
|
||||||
import Login from './pages/Login';
|
import Login from './pages/Login';
|
||||||
@@ -30,7 +30,16 @@ function PrivateRoute({ children }) {
|
|||||||
const { user, loading } = useAuth();
|
const { user, loading } = useAuth();
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return null;
|
return (
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
minHeight="100vh"
|
||||||
|
>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return user ? children : <Navigate to="/login" />;
|
return user ? children : <Navigate to="/login" />;
|
||||||
|
|||||||
@@ -16,9 +16,12 @@ export const AuthProvider = ({ children }) => {
|
|||||||
const response = await authService.checkAuth();
|
const response = await authService.checkAuth();
|
||||||
if (response.authenticated) {
|
if (response.authenticated) {
|
||||||
setUser(response.user);
|
setUser(response.user);
|
||||||
|
} else {
|
||||||
|
setUser(null);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Auth check failed:', error);
|
console.error('Auth check failed:', error);
|
||||||
|
setUser(null);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,10 +14,8 @@ const api = axios.create({
|
|||||||
api.interceptors.response.use(
|
api.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => response,
|
||||||
(error) => {
|
(error) => {
|
||||||
if (error.response?.status === 401) {
|
// Don't redirect here - let React Router handle it
|
||||||
// Redirect to login if unauthorized
|
// 401 errors will be caught by components and Navigate will handle redirect
|
||||||
window.location.href = '/login';
|
|
||||||
}
|
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user