refactor the logic of refreshing access_token (#10068)
NFish
1 year ago
committed by
GitHub
parent
de5dfd99f6
commit
302f4407f6
@ -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