React useEffect with auth0 is not working for getAccessTokenSilently as expected

Question

我有以下基于 documentation on Auth0 Website 的 React 组件

这是我的代码，我省略了一些不相关的行

import * as Auth0 from "@auth0/auth0-react";
import * as React from "react";
import * as ReactRedux from 'react-redux';

interface IProps{.....}
const AppComponent: React.SFC<IProps> = (props) => {

   const { getAccessTokenSilently } = Auth0.useAuth0();
   React.useEffect(() => {
     (async () => {
      try{
       const token = await getAccessTokenSilently();
       console.log(token);
       Props.setAccessToken(token); // this is a dispatch to save the token into redux state
      }
      catch(error){console.log(error);}
     })();
   }, [getAccessTokenSilently]);

   return(
   <> /*some jsx */ </>
   );
}

const mapDispatchToProps //standard redux mapping 
const mapStateToProps // standard redux mapping

export default ReactRedux.connect(mapStateToProps,mapDispatchToProps)(AppComponent);

我得到的行为是，一旦组件呈现，它就会将令牌记录到控制台，但是在令牌到期后，useffect 不会发生获取新令牌，这是我试图实现的任何想法可能是错误的或者是否有更好的方法来实现在到期时更新访问令牌的结果，而不会将其与特定操作紧密耦合。

Edit1：我错过了补充说不可能每隔一段时间刷新令牌这将作为一个整体产品交付给不同的客户，并且每个客户都有自己的 Auht0 租户我不能假设特定的令牌寿命

Answer 1

我使用我制作的名为useInterval 的钩子以特定时间间隔在后台更新令牌。

useInterval.ts

import { useCallback, useEffect } from "react";

export const useInterval = (func: () => void, delay: number, startImmediately: boolean, funcDeps: React.DependencyList) => {
    const callback = useCallback(func, funcDeps);

    useEffect(() => {
        const handler = setInterval(callback, delay);
        startImmediately && callback();
        return () => clearInterval(handler);
    }, [callback, delay, startImmediately]);
}

在应用组件中的使用

useInterval(() => {
    // code to update access token
}, 300000, true, [dependencies]);