token expiry redirection to Login

src/App.tsx

@@ -9,7 +9,9 @@ import OpeningsPage from "./pages/OpeningsPage";
 import DiscussionPage from "./pages/DiscussionPage";
 import ProfilePage from "./pages/ProfilePage";
 import './App.css';
-import { Route, Routes } from "react-router-dom";
+import {Route, Routes, useNavigate} from "react-router-dom";
+import { useEffect } from "react";
+import axios from "axios";
 import {
     ADMIN_ROLE,
     adminPagePath,
@@ -32,6 +34,59 @@ import ProtectedRoute from "./components/ProtectedRoute.tsx";
 
 
 export default function App() {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const checkToken = () => {
+            const token = sessionStorage.getItem("token");
+            if (!token) {
+                navigate("/login");
+            }
+        };
+
+        checkToken();
+
+        const interval = setInterval(() => {
+            checkToken();
+        }, 60000); // Check token validity every minute
+
+        return () => clearInterval(interval);
+    }, [navigate]);
+
+    // Add Axios interceptors
+    useEffect(() => {
+        const requestInterceptor = axios.interceptors.request.use(
+            (config) => {
+                const token = sessionStorage.getItem("token");
+                if (token) {
+                    config.headers.Authorization = `Bearer ${token}`;
+                }
+                return config;
+            },
+            (error) => {
+                return Promise.reject(error);
+            }
+        );
+
+        const responseInterceptor = axios.interceptors.response.use(
+            (response) => {
+                return response;
+            },
+            (error) => {
+                if (error.response.status === 401) {
+                    // Token is invalid or expired, redirect to login page
+                    sessionStorage.removeItem("token");
+                    navigate("/login");
+                }
+                return Promise.reject(error);
+            }
+        );
+
+        return () => {
+            axios.interceptors.request.eject(requestInterceptor);
+            axios.interceptors.response.eject(responseInterceptor);
+        };
+    }, [navigate]);
     return (
         <div className="app">
             <AppHeader />

src/services.ts

@@ -20,7 +20,34 @@ import {
     signUpAPI,
     studentsAPI
 } from "./utils.ts";
+// Add a request interceptor
+axios.interceptors.request.use(
+    (config) => {
+        const token = sessionStorage.getItem("token");
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
 
+// Add a response interceptor
+axios.interceptors.response.use(
+    (response) => {
+        return response;
+    },
+    (error) => {
+        if (error.response.status === 401) {
+            // Token is invalid or expired, redirect to login page
+            sessionStorage.removeItem("token");
+            window.location.href = "/login"; // Redirect to login page
+        }
+        return Promise.reject(error);
+    }
+);
 export const fetchResearchLabs = async (token: string): Promise<ResearchLabItem[]> => {
     const response = await axios.get(`${labsAPI}`, {
         headers: {