refresh token

src/App.tsx

@@ -13,6 +13,8 @@ import { IApiErrorRepsonse } from './types/error.types'
 import MainRouter from './router/Main'
 import AuthRouter from './router/Auth'
 import { Pages } from './config/Pages'
+import { getRefreshToken, setToken, setRefreshToken, removeToken, removeRefreshToken, getToken } from './config/func';
+import { refreshToken } from './pages/auth/service/AuthService';
 
 i18next.init({
   interpolation: { escapeValue: false },
@@ -24,28 +26,81 @@ i18next.init({
   }
 })
 
+declare global {
+  interface Window {
+    isRefreshingToken?: boolean;
+  }
+}
+
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
-    onError: (error: IApiErrorRepsonse) => {
+    onError: async (error: IApiErrorRepsonse) => {
       if (error?.response?.status === 401) {
-        localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
-        window.location.href = '/auth/login';
+        try {
+          // Use a flag to track if refresh is in progress
+          if (window.isRefreshingToken) {
+            // Wait for the refresh to complete
+            await new Promise(resolve => {
+              const checkComplete = setInterval(() => {
+                if (!window.isRefreshingToken) {
+                  clearInterval(checkComplete);
+                  resolve(true);
+                }
+              }, 100);
+            });
+            return;
+          }
+
+          // Set the flag to indicate refresh is in progress
+          window.isRefreshingToken = true;
+
+          try {
+            const refreshTokenValue = await getRefreshToken();
+            const { data } = await refreshToken({ refreshToken: refreshTokenValue || '' });
+
+            if (data?.accessToken?.token) {
+              // Save the new token
+              await setToken(data?.accessToken?.token);
+
+              // If refresh token also returned, update it
+              if (data.refreshToken?.token) {
+                await setRefreshToken(data.refreshToken?.token);
+              }
+
+              // Retry the failed request
+              queryClient.invalidateQueries();
+              return;
+            } else {
+              throw new Error('Invalid token response');
+            }
+          } finally {
+            window.isRefreshingToken = false;
+          }
+        } catch (refreshError: unknown) {
+          console.error('Token refresh failed:', refreshError);
+          // Clear tokens and redirect to login
+          await removeToken();
+          await removeRefreshToken();
+          window.location.href = '/auth/login';
+        }
       }
-    },
+    }
   }),
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
-    },
-  },
+      retry: false
+      // staleTime: 86400000 // 1 day in milliseconds
+    }
+  }
 });
 
 const App: FC = () => {
 
   const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking')
   useEffect(() => {
-
-    if (localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)) {
+    const token = getToken()
+    if (token) {
       setIsLogin('isLogin')
     } else {
       setIsLogin('isNotLogin')