React中Azure MSAL获取的Access Token闲置后首次请求报401未授权问题排查求助

大家好，我最近遇到一个特别费解的问题，想请各位帮忙分析下：

我维护着一个基于React的应用，用@msal/react包做身份认证，后端是带[Authorize]属性的ASP.NET Core Web API。现在出现的情况是：当应用在开发服务器上闲置一段时间（比如一两周）后，我回到页面发起接口请求，会直接收到401 Unauthorized的错误；但只要做一次硬刷新，请求就能正常通过——更奇怪的是，硬刷新前后用的居然是同一个Access Token！

我已经做了一些排查：

• 把第一次报错时用的那个Access Token复制到后端的Swagger里测试，接口能正常返回数据，说明Token本身是有效的，后端的授权逻辑应该没问题
• 检查了MSAL的实例状态，闲置后回到页面时accounts数组里的用户信息看起来也是正常的

下面是我用来获取和维护Access Token的自定义Hook代码，麻烦各位帮忙看看有没有什么潜在问题：

const useAccessToken = () => {
  const { instance, accounts } = useMsal()
  const [accessToken, setAccessToken] = useState('')

  const getAccessToken = useCallback(async () => {
    try {
      const user = JSON.parse(localStorage.getItem('user'))
      const response = await instance?.acquireTokenSilent({
        account: accounts[0],
        forceRefresh: true,
        scopes: user?.role === config.someUserRole 
          ? [b2cOptions.scopes[0]] 
          : [entraOptions.scopes[1]],
      })
      setAccessToken(response.accessToken)
    } catch (error) {
      localStorage.clear()
      instance?.logoutPopup({ 
        mainWindowRedirectUri: loginRoute, 
      })
    }
  }, [accounts, envConfig, instance, setAccessToken])

  useEffect(() => {
    getAccessToken()
  }, [accounts, getAccessToken, instance])

  return accessToken
}

export default useAccessToken

目前我完全摸不着头绪，会不会是MSAL的客户端缓存有什么过期逻辑没处理好？或者请求头在闲置后有什么异常？希望有遇到类似问题的朋友能给点思路，谢谢！

内容来源于stack exchange