与auth0一起使用useEffect无法对getAccessTokenSilent正常工作

问题描述

的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租户，我无法假设特定的令牌寿命

解决方法

我使用一个名为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]);

auth0 reactjs reactjs