Блог

У меня есть следующий компонент React, который я основал на этой документации на веб-сайте Auth0

вот мой код, в котором я пропустил несколько несвязанных строк

 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 не происходит, чтобы получить новый токен, чего я и пытаюсь достичь. любая идея, что может быть неправильным, или если есть лучший способ добиться результата обновления токена доступа по истечении срока, при этом он тесно связан с конкретным действием.

Редактирование 1: я пропустил добавление, что обновление токена с интервалами невозможно, это будет поставляться как единый продукт для разных клиентов, и у каждого клиента есть свой собственный клиент 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 amp;amp; callback();
        return () => clearInterval(handler);
    }, [callback, delay, startImmediately]);
}
  

Использование в компоненте приложения

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