Laravel Axios响应侦听器：无法处理过期的刷新\u令牌（401）

我的axios Response上有以下拦截器：

window.axios.interceptors.response.use(
响应=>{
返回响应；
},
错误=>{
让errorResponse=error.response；
if（errorResponse.status==401&&errorResponse.config&&errorResponse.config.\uu isRetryRequest）{
返回此。\u getAuthToken（）
。然后（响应=>{
this.setToken（response.data.access\u token，response.data.refresh\u token）；
errorResponse.config.\uuu isRetryRequest=true；
errorResponse.config.headers['Authorization']='Bearer'+response.data.access\u令牌；
返回window.axios（errorResponse.config）；
}).catch（错误=>{
返回承诺。拒绝（错误）；
});
}
返回承诺。拒绝（错误）；
}
);

_getAuthToken方法是：

\u getAuthToken（）{
如果（！this.authTokenRequest）{
this.authTokenRequest=window.axios.post（'/api/refresh_-token'{
“刷新令牌”：localStorage.getItem（'refresh\u-token'）
});
这个.authTokenRequest.then（响应=>{
this.authTokenRequest=null；
}).catch（错误=>{
this.authTokenRequest=null；
});
}
返回此.authTokenRequest；
}

该代码的灵感来源于

摘要：当用户调用API时，如果他的访问令牌已过期（API返回401代码），应用程序将调用/API/refresh\u令牌端点以获取新的访问令牌。如果在进行此调用时refresh\u令牌仍然有效，则一切正常：我获得一个新的access\u令牌和一个新的refresh\u令牌，并且再次执行并正确返回用户请求的初始API调用

刷新\u令牌也已过期时会出现问题。
在这种情况下，对/api/refresh_令牌的调用将返回401，而不会发生任何事情。我尝试了几种方法，但无法检测到，以便将用户重定向到应用程序的登录页面。
我发现在这种情况下，_getAuthToken方法中的if（！this.authTokenRequest）语句返回一个从未解析过的挂起承诺。我不明白为什么这是一个承诺。在我看来它应该是空的

我是一个有承诺的新手，所以我可能错过了一些东西！ 谢谢你的帮助

编辑：

我可能已经找到了一种更简单的方法来处理这个问题：当我调用/api/refresh_令牌端点时，使用axios.interceptors.response.eject（）禁用拦截器，然后重新启用它

守则：

createAxiosResponseInterceptor（）{
this.axiosResponseInterceptor=window.axios.interceptors.response.use(
响应=>{
返回响应；
},
错误=>{
让errorResponse=error.response；
if（errorResponse.status==401）{
window.axios.interceptors.response.eject（this.axiosResponseInterceptor）；
返回window.axios.post（'/api/refresh_-token',{
“刷新令牌”：此.\u getToken（“刷新令牌”）
})。然后（响应=>{
this.setToken（response.data.access\u token，response.data.refresh\u token）；
errorResponse.config.headers['Authorization']='Bearer'+response.data.access\u令牌；
this.createAxiosResponseInterceptor（）；
返回window.axios（errorResponse.config）；
}).catch（错误=>{
这个.destroyToken（）；
this.createAxiosResponseInterceptor（）；
this.router.push（'/login'）；
返回承诺。拒绝（错误）；
});
}
返回承诺。拒绝（错误）；
}
);
},

---

它看起来好还是坏？任何建议或评论都将不胜感激

上一个解决方案看起来不错。如果我处于相同的情况，我会提出与您类似的实现

我发现在这种情况下，_getAuthToken方法中的if（！this.authTokenRequest）语句返回一个从未解析过的挂起承诺。我不明白为什么这是一个承诺。在我看来它应该是空的

这是因为代码中的

this.authTokenRequest

刚刚分配了从

window.axios.post

创建的承诺。Promise是一种对象处理类型的延迟求值，因此您在

then

中实现的过程在解决Promise之前不会执行

JavaScript为我们提供了Promise对象作为一种异步事件处理程序，它使我们能够将流程实现为

，然后执行
链，以响应异步结果。HTTP请求总是不可预测的，因为HTTP请求有时会占用我们预期的更多时间，有时也不会。当我们使用HTTP请求来处理事件处理程序的异步响应时，总是使用PROMITE

在ES2015语法中，您可以使用async/await语法实现hanle Promise对象的函数，因为它看起来是同步的
 谢谢@IzumiSy。最后，我认为我的上一个解决方案更好：代码更少，异步更少，最重要的是，它可以工作！我很惊讶没有找到任何使用axios.interceptors.response.eject方法处理此问题的示例。我发现的所有例子都是使用承诺，但我从未设法让它们起作用。如果我的解决方案能帮助别人，我会很高兴！