Question

所以我第一次玩React和Redux。在我的应用程序中，我使用第三方API来获取数据等等，在这方面一切都很好。但是，像大多数受保护的API一样，我需要获取一个短期令牌来对API发出请求，我想在某种事件上设置一个计时器，以便我可以在后台刷新我的令牌。做这个的最好方式是什么？令牌到期时所以我可以在令牌到期前几分钟设置一个计时器来获取新令牌。

Answer 1

我想出的第一个解决方案是嵌套承诺，但它可能不是最好的解决方案。

首先请求您的令牌并在then回调请求中提供真实数据。

使用axios会是这样的：

axios.get('/my/token/path/')
.then(() => {
    axios.get('/my/real/data/path')
    .then(() => {
         // do something with data...
    }
}

为此请求添加捕获。如果令牌具有您所说的失效日期，您可以保存它并创建某种条件来检查该日期是否已过期并请求新令牌或根据该条件获取现有令牌。

伪代码中的示例：

function getTokenPromise() {
    if ('cookie with token exists') return Promise.resolve('my token from cookie');

    return axios.get('/my/token/path/');
}

// somewhere else in the code

getTokenPromise().then(() => {
    //do something with data
});

Answer 2

您可以做的是将获得的令牌保存为有效期的cookie，然后设置计时器以使用setInterval功能监控cookie。一旦有效期到期，cookie就会自动从浏览器中删除，并且返回未定义，这样您就可以再次进行API调用

您可以将npm包react-cookie用于此目的

import cookie from 'react-cookie';

<强>定时器

setInterval(function() {
   var  getCookie = cookie.load('token');

   if(getCookie === undefined) {
      // send an API fetch request here
  } 
}, 10000);

<强> setCookie方法

var s = new Date(0); 
 s.setUTCSeconds(exp);
 cookie.save(key,value, {expires: s});

Answer 3

您可以使用无状态路由并始终使用您拥有的任何令牌查询API并处理未经授权的响应？您需要在某个时候处理未经授权的响应，这样才能解决这两种情况。

也许打包axios来启用此功能？

经过一段时间后的调度行动

3 个答案: