Question

因此，在这里，我正在请求获取一个api令牌，然后在登录功能中使用它。该令牌在一小时后到期，这使网站停止工作。我想要的是在过期后一小时自动获取一个新令牌，以处理旧令牌的到期，并覆盖保存在会话存储中的令牌。顺便说一句，我在这里不使用Redux。

componentDidMount(){
      let url1 = ``;

        fetch(url1,{
          method: 'POST'
        })
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({authToken: responseJson.auth_token}, ()=>{
            sessionStorage.setItem('auth-token', this.state.authToken);
          })
        })
        .catch((error) => {
          console.log(error)
        });
    }

Answer 1

看看下面的代码，假设您说令牌过期时间为1小时，则每59分钟获取一次userToken。我们要做的是在组件装入后立即调用fetchToken并启动计时器，该计时器将在59分钟后重复此调用。组件卸下后，我们将清理并清除计时器。（注意：59分钟只是一个假设，您可以在到期前随时获取令牌）

componentDidMount(){
    let url1 = ``;
    this.fetchToken();
    this.refetchTokenId = setInterval(this.fetchToken, 59 * 60 * 1000)
}

componentWillUnmount() {
    clearInterval(this.refetchTokenId)
}

fetchToken = () =>  {
    fetch(url1,{
        method: 'POST'
    })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({authToken: responseJson.auth_token}, ()=>{
            sessionStorage.setItem('auth-token', this.state.authToken);
            })
        })
        .catch((error) => {
            console.log(error)
        });
}

过期后自动获取新令牌

1 个答案: