reactjs - 如何使用并行响应刷新 Axios 中的身份验证 token ？

Question

我想使用 Axios 在 React 应用程序中实现 JWT 身份验证。 有许多使用 axios.interceptors 的解决方案，如果请求由于身份验证错误而失败，可以再次获取 token 。 示例:

axios.interceptors.response.use(function(response) {
    return response;
},function(error) {
    const originalReq = error.config;
    if ( error.response.status == 401 && 
         !originalReq._retry && 
         error.response.config.url != URL_USER_AUTHENTICATE ) {
        originalReq._retry = true;
        return axios.post(BASE_URL+URL_REFRESH_TOKEN,{})
                    .then((res) =>{
                        if ( res.data.status == "success") {
                            return axios(originalReq);
                        } 
                    }).catch((error) => {window.location.href="/logout/nosession"});
    }
    return Promise.reject(error);
});

但是，如果我们有并行请求，它就不起作用。假设我们有两个并行请求，因此两者都会请求新的身份验证 token 。

有人知道有什么解决办法吗？

Answer 1

我的示例 React SPA 有一些管理此问题的代码，并且可能会为您自己的解决方案提供一些想法。下面的第三个类使用一种处理 promise 列表的技术，但仅对其中一个进行远程调用，然后向所有调用者返回相同的结果。

• API 401 logic

• Refresh trigger

• Concurrency handler

另一种解决方案是，当 token 即将到期时，根据随访问 token 返回的 expires_in 字段，在后台计时器中进行静默刷新。但这并不完全可靠，因为 401 可能因多种原因而发生，例如由于某些类型的基础设施或服务器 key 更改，因此我总是在客户端中编写 401 处理，以确保可靠性。