diff --git a/src/App.jsx b/src/App.jsx index a17dd8e..dafa0ce 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,31 @@ -import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; +import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom'; +import { useEffect, useRef } from 'react'; import { AuthProvider, useAuth } from './context/AuthContext'; import LoginPage from './pages/LoginPage'; import RegisterPage from './pages/RegisterPage'; import HomePage from './pages/HomePage'; import AdminPage from './pages/AdminPage'; +function AuthRedirect() { + const { user } = useAuth(); + const navigate = useNavigate(); + const location = useLocation(); + const prevUserRef = useRef(user); + + useEffect(() => { + if (prevUserRef.current && !user) { + if (location.pathname.startsWith('/admin')) { + navigate('/', { replace: true }); + } else { + navigate('/login', { replace: true }); + } + } + prevUserRef.current = user; + }, [user, navigate, location.pathname]); + + return null; +} + function AdminRoute({ children }) { const { user } = useAuth(); if (!user) return ; @@ -15,19 +36,22 @@ function AdminRoute({ children }) { function AppRoutes() { const { user } = useAuth(); return ( - - : } /> - : } /> - } /> - - - - } - /> - + <> + + + : } /> + : } /> + } /> + + + + } + /> + + ); } diff --git a/src/api/client.js b/src/api/client.js index 72680a8..1ab9630 100644 --- a/src/api/client.js +++ b/src/api/client.js @@ -6,6 +6,9 @@ export async function apiFetch(path, options = {}) { if (token) headers['Authorization'] = `Bearer ${token}`; const res = await fetch(BASE + path, { ...options, headers }); + if (res.status === 401) { + window.dispatchEvent(new Event('auth:unauthorized')); + } if (!res.ok) { const err = new Error(res.statusText); err.status = res.status; diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx index 8349209..867ccfd 100644 --- a/src/context/AuthContext.jsx +++ b/src/context/AuthContext.jsx @@ -1,4 +1,4 @@ -import { createContext, useContext, useState, useCallback } from 'react'; +import { createContext, useContext, useState, useCallback, useEffect } from 'react'; import { login as apiLogin } from '../api/auth'; const AuthContext = createContext(null); @@ -26,6 +26,11 @@ export function AuthProvider({ children }) { setUser(null); }, []); + useEffect(() => { + window.addEventListener('auth:unauthorized', logout); + return () => window.removeEventListener('auth:unauthorized', logout); + }, [logout]); + return ( {children}