diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 12b4260..547b8d4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -13,6 +13,7 @@ import { Firewall } from './pages/Firewall'; import { useQueryClient } from '@tanstack/react-query'; import NFProxy from './pages/NFProxy'; import ServiceDetailsNFProxy from './pages/NFProxy/ServiceDetails'; +import { useAuth } from './js/store'; function App() { @@ -22,16 +23,19 @@ function App() { const [error, setError] = useState() const [loadinBtn, setLoadingBtn] = useState(false); const queryClient = useQueryClient() + const { isAuthenticated, access_token } = useAuth() useEffect(()=>{ - socketio.auth = { token: localStorage.getItem("access_token") } + socketio.auth = { token: access_token || "" } socketio.connect() getStatus() socketio.on("update", (data) => { queryClient.invalidateQueries({ queryKey: data }) }) socketio.on("connect_error", (err) => { - errorNotify("Socket.Io connection failed! ",`Error message: [${err.message}]`) + if (access_token){ + errorNotify("Socket.Io connection failed! ",`Error message: [${err.message}]`) + } getStatus() }); return () => { @@ -39,7 +43,7 @@ function App() { socketio.off("connect_error") socketio.disconnect() } -},[]) +},[isAuthenticated]) const getStatus = () =>{ getstatus().then( res =>{ diff --git a/frontend/src/js/store.ts b/frontend/src/js/store.ts index 8ad2a7c..13fff84 100644 --- a/frontend/src/js/store.ts +++ b/frontend/src/js/store.ts @@ -1,4 +1,5 @@ import { create } from 'zustand' +import { persist, createJSONStorage } from 'zustand/middleware'; type NavbarStore = { navOpened: boolean, @@ -15,3 +16,75 @@ export const useNavbarStore = create()((set) => ({ openNav: () => set({ navOpened: true }), toggleNav: () => set((state) => ({ navOpened: !state.navOpened })), })) + + + +interface AuthState { + access_token: string | null; + setAccessToken: (token: string | null) => void; + clearAccessToken: () => void; + getAccessToken: () => string | null; +} + +export const useAuthStore = create()( + persist( + (set, get) => ({ + access_token: null, + setAccessToken: (token) => set({ access_token: token }), + clearAccessToken: () => set({ access_token: null }), + getAccessToken: () => get().access_token, + }), + { + name: 'auth-storage', + storage: createJSONStorage(() => localStorage), + partialize: (state) => ({ access_token: state.access_token }), + } + ) +); + +// Hook personalizzati per un uso più facile nei componenti +export const useAuth = () => { + const { access_token, setAccessToken, clearAccessToken, getAccessToken } = useAuthStore(); + + const isAuthenticated = !!access_token; + + return { + access_token, + isAuthenticated, + setAccessToken, + clearAccessToken, + getAccessToken, + }; +}; + +interface SessionState { + home_section: string | null; + setHomeSection: (section: string | null) => void; + getHomeSection: () => string | null; +} + +export const useSessionStore = create()( + persist( + (set, get) => ({ + home_section: null, + setHomeSection: (section) => set({ home_section: section }), + getHomeSection: () => get().home_section, + }), + { + name: 'session-storage', + storage: createJSONStorage(() => sessionStorage), + partialize: (state) => ({ home_section: state.home_section }), + } + ) +); + + +export const useSession = () => { + const { home_section, setHomeSection, getHomeSection } = useSessionStore(); + + return { + home_section, + setHomeSection, + getHomeSection, + }; +}; diff --git a/frontend/src/js/utils.tsx b/frontend/src/js/utils.tsx index 56297fd..0999b95 100644 --- a/frontend/src/js/utils.tsx +++ b/frontend/src/js/utils.tsx @@ -7,6 +7,7 @@ import { Buffer } from "buffer" import { QueryClient, useQuery } from "@tanstack/react-query"; import { useMediaQuery } from "@mantine/hooks"; import { io } from "socket.io-client"; +import { useAuthStore, useSessionStore } from "./store"; export const IS_DEV = import.meta.env.DEV @@ -32,14 +33,14 @@ export const socketio = import.meta.env.DEV? path:"/sock/socket.io", transports: ['websocket'], auth: { - token: localStorage.getItem("access_token") + token: useAuthStore.getState().getAccessToken() } }): io({ path:"/sock/socket.io", transports: ['websocket'], auth: { - token: localStorage.getItem("access_token") + token: useAuthStore.getState().getAccessToken() } }) @@ -86,7 +87,7 @@ export async function genericapi(method:string,path:string,data:any = undefined, cache: 'no-cache', headers: { ...(data?{'Content-Type': is_form ? 'application/x-www-form-urlencoded' : 'application/json'}:{}), - "Authorization" : "Bearer " + window.localStorage.getItem("access_token") + "Authorization" : "Bearer " + useAuthStore.getState().getAccessToken() }, body: data? (is_form ? (new URLSearchParams(data)).toString() : JSON.stringify(data)) : undefined }).then(res => { @@ -132,7 +133,7 @@ export function getMainPath(){ } export function HomeRedirector(){ - const section = sessionStorage.getItem("home_section") + const section = useSessionStore.getState().getHomeSection(); const path = section?`/${section}`:`/nfregex` return } @@ -153,27 +154,27 @@ export async function getstatus(){ } export async function logout(){ - window.localStorage.removeItem("access_token") + useAuthStore.getState().clearAccessToken(); } export async function setpassword(data:PasswordSend) { const { status, access_token } = await postapi("set-password",data) as ServerResponseToken; if (access_token) - window.localStorage.setItem("access_token", access_token); + useAuthStore.getState().setAccessToken(access_token); return status === "ok"?undefined:status } export async function changepassword(data:ChangePassword) { const { status, access_token } = await postapi("change-password",data) as ServerResponseToken; if (access_token) - window.localStorage.setItem("access_token", access_token); + useAuthStore.getState().setAccessToken(access_token); return status === "ok"?undefined:status } export async function login(data:PasswordSend) { const from = {username: "login", password: data.password}; const { status, access_token } = await postapi("login",from,true) as LoginResponse; - window.localStorage.setItem("access_token", access_token); + useAuthStore.getState().setAccessToken(access_token); return status; }