尝试在令牌过期后使用 ReactJs 调用令牌 API

Question

I want to call the tokenApiCall as soon as the current time exceeds the expiry time of token in the prior call. I am caching the token and expiry values in session storage and below is the sample code I have written for the same. I am not able to understand how I can make sure it re-renders whenever needed-

import React from 'react';
import axios from 'axios';
class ApiCall extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      token: '',
      expiry: ''
    };
  }

  tokenApiCall(){
    axios
    .post(
        'https://api/v1/Getauthtoken',
      {
            username: 'xyz',
            client: 'XYZ', 
      }
    )
    .then((res) => {
      this.setState({ token: res.token, expiry: res.expires_in});
      sessionStorage.setItem('tokenval', this.state.token);
      sessionStorage.setItem('tokenExp', this.state.expiry);
      
    })
    .catch((error) => {
      console.log('Error message is ' + error);

    }); 
    

  }
  componentDidMount() {
     
    const curDate = new Date();
    let [hour, minutes, seconds] = [curDate.getHours(), curDate.getMinutes(), curDate.getSeconds()];
        hour = hour % 12;
        hour = hour ? hour : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0'+minutes : minutes;
        const currentTime = hour + ':' + minutes + ':' + seconds;
        const exp = sessionStorage.getItem('tokenExp');
        if(!sessionStorage.getItem('tokenval')) {
        this.tokenApiCall();
  }
  else {
      if(currentTime > exp){
      this.tokenApiCall();
     }
     else 
     {
         console.log("currentTime < exp")
     }
}
  }

  render() {
    return <div>Hello</div>
  }
}

export default ApiCall;

Answer 1

you can use setTimeout inside componentDidMount

TimeInMilliSeconds is difference between exp - currentTime in MilliSeconds.

 if(currentTime > exp){
      this.tokenApiCall();
 }
 else 
 {
    setTimeout(() => {
        this.tokenApiCall();
    }, TimeInMilliSeconds)

    // TimeInMilliSeconds = exp - currentTime
 }