diff --git a/src/App.tsx b/src/App.tsx index 665e5fdfb1..aaeda7852e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import Acls from "./components/users/Acls"; import About from "./components/About"; import { useAppDispatch } from "./store"; import { fetchOcVersion, fetchUserInfo } from "./slices/userInfoSlice"; +import { subscribeToAuthEvents } from "./utils/broadcastSync"; function App() { const dispatch = useAppDispatch(); @@ -24,6 +25,9 @@ function App() { // Load information about current opencast version on mount dispatch(fetchOcVersion()); + // Subscribe to the auth event to follow the login - logout events! + subscribeToAuthEvents(); + // Add event listener for back button to check if we are still logged in window.addEventListener("popstate", function (event) { dispatch(fetchUserInfo()); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index ee7dc91b98..da613a4232 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -24,6 +24,7 @@ import { HiTranslate } from "react-icons/hi"; import { IconContext } from "react-icons"; import ButtonLikeAnchor from "./shared/ButtonLikeAnchor"; import { ModalHandle } from "./shared/modals/Modal"; +import { broadcastLogout } from "../utils/broadcastSync"; // References for detecting a click outside of the container of the dropdown menus const containerLang = React.createRef(); @@ -31,10 +32,6 @@ const containerHelp = React.createRef(); const containerUser = React.createRef(); const containerNotify = React.createRef(); -function logout() { - window.location.href = "/j_spring_security_logout"; -} - /** * Component that renders the header and the navigation in the upper right corner. */ @@ -417,6 +414,12 @@ const MenuHelp = ({ const MenuUser = () => { const { t } = useTranslation(); + + const logout = () => { + // Here we broadcast logout, in order to redirect other tabs to login page! + broadcastLogout(); + window.location.href = "/j_spring_security_logout"; + } return (
  • diff --git a/src/utils/broadcastSync.ts b/src/utils/broadcastSync.ts new file mode 100644 index 0000000000..3fed1cf565 --- /dev/null +++ b/src/utils/broadcastSync.ts @@ -0,0 +1,21 @@ +const bc = new BroadcastChannel('auth_channel'); + +export const broadcastLogout = () => { + bc.postMessage({ type: 'LOGOUT' }); +}; + +export const subscribeToAuthEvents = () => { + bc.onmessage = (event) => { + if (event.data?.type === 'LOGOUT') { + performOnLogoutActions(); + } + }; +}; + +const performOnLogoutActions = () => { + // We need a tiny pause, in order to make sure the logout process has happened. + const intvl = setInterval(() => { + window.location.href = "/login.html"; + clearInterval(intvl); + }, 750); +}