refactor the logic of refreshing access_token (#10068)
NFish
1 year ago
committed by
Joel
parent
3e7f38d904
commit
aab1ab692a
@ -1,99 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import { useCallback, useEffect, useRef } from 'react'
|
|
||||||
import { jwtDecode } from 'jwt-decode'
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import utc from 'dayjs/plugin/utc'
|
|
||||||
import { useRouter } from 'next/navigation'
|
|
||||||
import type { CommonResponse } from '@/models/common'
|
|
||||||
import { fetchNewToken } from '@/service/common'
|
|
||||||
import { fetchWithRetry } from '@/utils'
|
|
||||||
|
|
||||||
dayjs.extend(utc)
|
|
||||||
|
|
||||||
const useRefreshToken = () => {
|
|
||||||
const router = useRouter()
|
|
||||||
const timer = useRef<NodeJS.Timeout>()
|
|
||||||
const advanceTime = useRef<number>(5 * 60 * 1000)
|
|
||||||
|
|
||||||
const getExpireTime = useCallback((token: string) => {
|
|
||||||
if (!token)
|
|
||||||
return 0
|
|
||||||
const decoded = jwtDecode(token)
|
|
||||||
return (decoded.exp || 0) * 1000
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const getCurrentTimeStamp = useCallback(() => {
|
|
||||||
return dayjs.utc().valueOf()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const handleError = useCallback(() => {
|
|
||||||
localStorage?.removeItem('is_refreshing')
|
|
||||||
localStorage?.removeItem('console_token')
|
|
||||||
localStorage?.removeItem('refresh_token')
|
|
||||||
router.replace('/signin')
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const getNewAccessToken = useCallback(async () => {
|
|
||||||
const currentAccessToken = localStorage?.getItem('console_token')
|
|
||||||
const currentRefreshToken = localStorage?.getItem('refresh_token')
|
|
||||||
if (!currentAccessToken || !currentRefreshToken) {
|
|
||||||
handleError()
|
|
||||||
return new Error('No access token or refresh token found')
|
|
||||||
}
|
|
||||||
if (localStorage?.getItem('is_refreshing') === '1') {
|
|
||||||
clearTimeout(timer.current)
|
|
||||||
timer.current = setTimeout(() => {
|
|
||||||
getNewAccessToken()
|
|
||||||
}, 1000)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
const currentTokenExpireTime = getExpireTime(currentAccessToken)
|
|
||||||
if (getCurrentTimeStamp() + advanceTime.current > currentTokenExpireTime) {
|
|
||||||
localStorage?.setItem('is_refreshing', '1')
|
|
||||||
const [e, res] = await fetchWithRetry(fetchNewToken({
|
|
||||||
body: { refresh_token: currentRefreshToken },
|
|
||||||
}) as Promise<CommonResponse & { data: { access_token: string; refresh_token: string } }>)
|
|
||||||
if (e) {
|
|
||||||
handleError()
|
|
||||||
return e
|
|
||||||
}
|
|
||||||
const { access_token, refresh_token } = res.data
|
|
||||||
localStorage?.setItem('is_refreshing', '0')
|
|
||||||
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())
|
|
||||||
}
|
|
||||||
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')
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return {
|
|
||||||
getNewAccessToken,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useRefreshToken
|
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import { apiPrefix } from '@/config'
|
||||||
|
import { fetchWithRetry } from '@/utils'
|
||||||
|
|
||||||
|
let isRefreshing = false
|
||||||
|
function waitUntilTokenRefreshed() {
|
||||||
|
return new Promise<void>((resolve, reject) => {
|
||||||
|
function _check() {
|
||||||
|
const isRefreshingSign = localStorage.getItem('is_refreshing')
|
||||||
|
if ((isRefreshingSign && isRefreshingSign === '1') || isRefreshing) {
|
||||||
|
setTimeout(() => {
|
||||||
|
_check()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_check()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// only one request can send
|
||||||
|
async function getNewAccessToken(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const isRefreshingSign = localStorage.getItem('is_refreshing')
|
||||||
|
if ((isRefreshingSign && isRefreshingSign === '1') || isRefreshing) {
|
||||||
|
await waitUntilTokenRefreshed()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
globalThis.localStorage.setItem('is_refreshing', '1')
|
||||||
|
isRefreshing = true
|
||||||
|
const refresh_token = globalThis.localStorage.getItem('refresh_token')
|
||||||
|
|
||||||
|
// Do not use baseFetch to refresh tokens.
|
||||||
|
// If a 401 response occurs and baseFetch itself attempts to refresh the token,
|
||||||
|
// it can lead to an infinite loop if the refresh attempt also returns 401.
|
||||||
|
// To avoid this, handle token refresh separately in a dedicated function
|
||||||
|
// that does not call baseFetch and uses a single retry mechanism.
|
||||||
|
const [error, ret] = await fetchWithRetry(globalThis.fetch(`${apiPrefix}/refresh-token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json;utf-8',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ refresh_token }),
|
||||||
|
}))
|
||||||
|
if (error) {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (ret.status === 401)
|
||||||
|
return Promise.reject(ret)
|
||||||
|
|
||||||
|
const { data } = await ret.json()
|
||||||
|
globalThis.localStorage.setItem('console_token', data.access_token)
|
||||||
|
globalThis.localStorage.setItem('refresh_token', data.refresh_token)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
isRefreshing = false
|
||||||
|
globalThis.localStorage.removeItem('is_refreshing')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function refreshAccessTokenOrRelogin(timeout: number) {
|
||||||
|
return Promise.race([new Promise<void>((resolve, reject) => setTimeout(() => {
|
||||||
|
isRefreshing = false
|
||||||
|
globalThis.localStorage.removeItem('is_refreshing')
|
||||||
|
reject(new Error('request timeout'))
|
||||||
|
}, timeout)), getNewAccessToken()])
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue