Merge pull request #276 from ajinkyapandetekdi/api-service-all-1.4.0

Issueid #234841 feat:Monitor Session Expiry and Redirect to Login

src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { ThemeProvider } from "@mui/material";
-import { BrowserRouter as Router } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { StyledEngineProvider } from "@mui/material/styles";
 import FingerprintJS from "@fingerprintjs/fingerprintjs";
 import routes from "./routes";
@@ -9,8 +9,10 @@ import theme from "./assets/styles/theme";
 import { initialize, end } from "./services/telementryService";
 import { startEvent } from "./services/callTelemetryIntract";
 import "@tekdi/all-telemetry-sdk/index.js";
+import axios from "axios";
 
 const App = () => {
+  const navigate = useNavigate();
   const ranonce = useRef(false);
   useEffect(() => {
     const initService = async (visitorId) => {
@@ -79,12 +81,38 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response && error.response.status === 401) {
+          if (error?.response?.data?.error === "Unauthorized") {
+            if (
+              localStorage.getItem("contentSessionId") &&
+              process.env.REACT_APP_IS_APP_IFRAME === "true"
+            ) {
+              window.parent.postMessage(
+                {
+                  message: "Unauthorized",
+                },
+                "*"
+              );
+            } else {
+              localStorage.clear();
+              sessionStorage.clear();
+              navigate("/login");
+            }
+          }
+        }
+        return Promise.reject(error);
+      }
+    );
+  }, []);
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <Router>
-          <AppContent routes={routes} />
-        </Router>
+        <AppContent routes={routes} />
       </ThemeProvider>
     </StyledEngineProvider>
   );

src/index.js

@@ -1,15 +1,19 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import App from './App';
-import './assets/styles/index.scss';
-import store from './store/configureStore';
-import './index.css';
+import React from "react";
+import { render } from "react-dom";
+import { Provider } from "react-redux";
+import App from "./App";
+import "./assets/styles/index.scss";
+import store from "./store/configureStore";
+import "./index.css";
+import { BrowserRouter as Router } from "react-router-dom";
+
 render(
-    <React.StrictMode>
-        <Provider store={store}>
-            <App />
-        </Provider>
-    </React.StrictMode>,
-    document.getElementById('root'),
+  <React.StrictMode>
+    <Router>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </Router>
+  </React.StrictMode>,
+  document.getElementById("root")
 );