From b6d045cebfd610de0d82c954fd75aefa9889a5e9 Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Tue, 29 Oct 2024 09:55:14 +0800
Subject: [PATCH] fix: Fix page logout issue due to refresh-token (#9970)

---
 web/hooks/use-refresh-token.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/hooks/use-refresh-token.ts b/web/hooks/use-refresh-token.ts
index 293f3159de..53dc4faf00 100644
--- a/web/hooks/use-refresh-token.ts
+++ b/web/hooks/use-refresh-token.ts
@@ -41,6 +41,7 @@ const useRefreshToken = () => {
       return new Error('No access token or refresh token found')
     }
     if (localStorage?.getItem('is_refreshing') === '1') {
+      clearTimeout(timer.current)
       timer.current = setTimeout(() => {
         getNewAccessToken()
       }, 1000)
@@ -61,12 +62,14 @@ const useRefreshToken = () => {
       localStorage?.setItem('console_token', access_token)
       localStorage?.setItem('refresh_token', refresh_token)
       const newTokenExpireTime = getExpireTime(access_token)
+      clearTimeout(timer.current)
       timer.current = setTimeout(() => {
         getNewAccessToken()
       }, newTokenExpireTime - advanceTime.current - getCurrentTimeStamp())
     }
     else {
       const newTokenExpireTime = getExpireTime(currentAccessToken)
+      clearTimeout(timer.current)
       timer.current = setTimeout(() => {
         getNewAccessToken()
       }, newTokenExpireTime - advanceTime.current - getCurrentTimeStamp())
@@ -74,8 +77,15 @@ const useRefreshToken = () => {
     return null
   }, [getExpireTime, getCurrentTimeStamp, handleError])
 
+  const handleVisibilityChange = useCallback(() => {
+    if (document.visibilityState === 'visible')
+      getNewAccessToken()
+  }, [])
+
   useEffect(() => {
+    window.addEventListener('visibilitychange', handleVisibilityChange)
     return () => {
+      window.removeEventListener('visibilitychange', handleVisibilityChange)
       clearTimeout(timer.current)
       localStorage?.removeItem('is_refreshing')
     }