时间戳

首页 > 解决方案 > 过期后自动获取新token

reactjs - 过期后自动获取新token

问题描述

所以，在这里我请求获取一个 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)
        });
    }

标签： reactjsecmascript-6fetch-apireact-props

解决方案

看看下面的代码，假设您在问题中说令牌到期时间为 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)
        });
}

推荐阅读