fixed
This commit is contained in:
19
src/App.jsx
19
src/App.jsx
@@ -21,6 +21,7 @@ import Admin from './pages/Admin';
|
|||||||
function App() {
|
function App() {
|
||||||
const [user, setUser] = useState(null);
|
const [user, setUser] = useState(null);
|
||||||
const [isAdmin, setIsAdmin] = useState(false);
|
const [isAdmin, setIsAdmin] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
const fetchProfile = async () => {
|
const fetchProfile = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -29,9 +30,15 @@ function App() {
|
|||||||
setIsAdmin(response.user.role === 'admin');
|
setIsAdmin(response.user.role === 'admin');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch profile:', error);
|
console.error('Failed to fetch profile:', error);
|
||||||
|
// Only logout on authentication errors (401/403), not network errors
|
||||||
|
if (error.response && (error.response.status === 401 || error.response.status === 403)) {
|
||||||
setUser(null);
|
setUser(null);
|
||||||
setIsAdmin(false);
|
setIsAdmin(false);
|
||||||
}
|
}
|
||||||
|
// For network errors, keep current state and try again later
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -48,9 +55,19 @@ function App() {
|
|||||||
setIsAdmin(false);
|
setIsAdmin(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Header user={user} onLogout={handleLogout} isAdmin={isAdmin} />
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
|
||||||
|
<div>Loading...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<Header user={user} onLogout={handleLogout} isAdmin={isLoading ? false : isAdmin} />
|
||||||
<main>
|
<main>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
|
|||||||
@@ -12,14 +12,17 @@ class AuthService {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Handle 403 responses (invalid token) by logging out
|
// Handle authentication errors (401/403) but don't auto-redirect on network errors
|
||||||
this.api.interceptors.response.use(
|
this.api.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => response,
|
||||||
(error) => {
|
(error) => {
|
||||||
if (error.response && error.response.status === 403) {
|
// Only auto-logout on explicit authentication errors, not network issues
|
||||||
|
if (error.response && (error.response.status === 401 || error.response.status === 403)) {
|
||||||
this.logout();
|
this.logout();
|
||||||
window.location.href = '/auth'; // Assuming there's an auth page
|
// Only redirect if not already on auth page to avoid redirect loops
|
||||||
|
if (window.location.pathname !== '/auth') {
|
||||||
|
window.location.href = '/auth';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user