feat: add logout functionality and auto-logout on 401 responses
Add AUTH_EXPIRED_EVENT constant and dispatch event on 401 responses in API client, clearing stored token. Add handleLogout function to App component and wire up event listener to trigger logout on auth expiration. Pass onLogout prop to Layout component and add Logout button to topbar-actions. Update CSS to apply flex layout to topbar-actions and make responsive. Add backend hostname and network aliases in docker-compose to ensure consistent
This commit is contained in:
1 parent
61d2b4b25c
commit
e2362c6033
5 files changed
+40
-7
No files matched your search
@@ -1,6 +1,7 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Navigate, Route, Routes } from "react-router-dom";
|
||||
|
||||
import { AUTH_EXPIRED_EVENT } from "../api/client";
|
||||
import { Layout } from "../components/Layout";
|
||||
import { AuditPage } from "../features/audit/AuditPage";
|
||||
import { LoginPage } from "../features/auth/LoginPage";
|
||||
@@ -20,13 +21,24 @@ export function App() {
|
||||
setToken(accessToken);
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
localStorage.removeItem("nexavpn_admin_token");
|
||||
setToken("");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const onExpired = () => handleLogout();
|
||||
window.addEventListener(AUTH_EXPIRED_EVENT, onExpired);
|
||||
return () => window.removeEventListener(AUTH_EXPIRED_EVENT, onExpired);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/login"
|
||||
element={authenticated ? <Navigate to="/" replace /> : <LoginPage onAuthenticated={handleAuthenticated} />}
|
||||
/>
|
||||
<Route element={authenticated ? <Layout /> : <Navigate to="/login" replace />}>
|
||||
<Route element={authenticated ? <Layout onLogout={handleLogout} /> : <Navigate to="/login" replace />}>
|
||||
<Route path="/" element={<DashboardPage />} />
|
||||
<Route path="/users" element={<UsersPage />} />
|
||||
<Route path="/devices" element={<DevicesPage />} />
|
||||
|
||||
Reference in new issue
Block a user