Reactjs 在刷新访问令牌时,如何在react redux应用程序中暂停和重新启动API调用?

Reactjs 在刷新访问令牌时,如何在react redux应用程序中暂停和重新启动API调用?,reactjs,redux,oauth-2.0,react-redux,redux-saga,Reactjs,Redux,Oauth 2.0,React Redux,Redux Saga,我们有一个react redux应用程序,在每次页面加载时使用多个API调用获取数据。该应用程序遵循OAuth2协议。它有一个频繁过期的访问令牌和一个用于获取新访问令牌的刷新令牌。 如果使用过期的访问令牌进行API调用,则会收到401错误,错误消息为“API令牌已过期”。然后我们需要从身份验证服务器获取新令牌 我的问题是: 当一个页面加载时,比如说发送了8个API调用。我们收到3个成功的200s,但从第4个响应开始,我们收到401“API令牌已过期”。此时,我希望将我已进行但未收到响应或收到40

我们有一个react redux应用程序,在每次页面加载时使用多个API调用获取数据。该应用程序遵循OAuth2协议。它有一个频繁过期的访问令牌和一个用于获取新访问令牌的刷新令牌。 如果使用过期的访问令牌进行API调用,则会收到401错误,错误消息为“API令牌已过期”。然后我们需要从身份验证服务器获取新令牌

我的问题是: 当一个页面加载时,比如说发送了8个API调用。我们收到3个成功的200s,但从第4个响应开始,我们收到401“API令牌已过期”。此时,我希望将我已进行但未收到响应或收到401错误的所有API调用放入队列,直到我刷新访问令牌。成功刷新访问令牌后,我想重新执行保存在队列中的API调用。我怎样才能做到这一点


在网上寻找这个,我发现redux saga可能有效,但没有看到任何迹象表明它可以用于这个用例

我也曾经处理过这个案子。这是我的解决方案:

/**
*连接到API
*/
export const makeRequest=(args)=>{
const request=fetch(args)//示例
return\u retryRequestIfExpired(请求,args)
}
/**
*伪造获取访问令牌。
*/
const_getNewAccessToken=()=>{
返回新承诺((解决、拒绝)=>{
解析('xyz')
})
}
const\u retryRequestIfExpired=(请求,参数)=>{
返回请求.catch(错误=>{
如果(error==='abc'){//您需要的任何原因
返回_refreshAccessToken()
。然后(newAccessToken=>{
const updateArgs={
…args,
标题:{
“授权”:newAccessToken
}
}
//使用新的访问令牌重试
返回makeRequest(updateArgs)
})
}
抛出错误
})
}
/**
*重要的
*/
设_isRefreshingToken=false
让_订阅服务器=[]
const\u subscribe=subscriber=>{
if(订户类型!='function'| | | u订户。indexOf(订户)!=-1){
返回错误
}
_订阅服务器=[].concat(_订阅服务器,[订阅服务器])
}
常量广播=(错误=null,数据)=>{
_isRefreshingToken=false
_订阅者。forEach(订阅者=>{
订户(错误,数据)
})
_订户=[]
}
常量刷新访问令牌=()=>{
if(_isRefreshingToken){//如果请求正在创建新的访问令牌
返回新承诺((解决、拒绝)=>{
const订户=(错误,accessToken)=>{
如果(错误){
返回拒绝(错误)
}
返回解析(accessToken)
}
_订阅(订户)
})
}
_isRefreshingToken=true
返回_getNewAccessToken()
。然后(accessToken=>{
_广播(空,accessToken)
返回accessToken
})
.catch(错误=>{
_广播(错误)
抛出错误
})
}
/**
*结束重要
*/

这样,只有第一个请求将实际创建一个新的访问令牌,其余请求将临时停止,直到创建一个新的访问令牌。

谢谢!你能解释一下订阅和广播功能在做什么吗?是的。我的想法是创建列表订阅者(
\u订阅者
)。只有第一个请求将创建新的访问令牌,其余请求将添加到列表订阅者(使用
\u subscribe
)。在创建新的访问令牌之前,它将通知所有订阅者(使用
\u broadcast
)获取新的访问令牌。