Javascript axios/axios身份验证刷新时JWT刷新令牌流出现问题

Javascript axios/axios身份验证刷新时JWT刷新令牌流出现问题,javascript,axios,jwt,Javascript,Axios,Jwt,(我在这里读过许多类似的问题,大多数/所有人都说使用不同的axios实例进行刷新令牌请求(与API请求相比)。但是,我不清楚这将如何工作,因为我使用的是自动刷新访问令牌。) 我正在开发一个应用程序,该应用程序具有用于后端API请求的基于JWT的身份验证流。总流程运行良好;登录后,用户将获得长期刷新令牌和短期访问令牌。使用axios插件,我能够在访问令牌过期时自动刷新它 我的问题是,当刷新令牌过期时,我无法捕获错误并重定向用户以重新验证。我尝试过的任何东西都捕捉不到错误。自动刷新挂钩的(当前)代码

(我在这里读过许多类似的问题,大多数/所有人都说使用不同的axios实例进行刷新令牌请求(与API请求相比)。但是,我不清楚这将如何工作,因为我使用的是自动刷新访问令牌。)

我正在开发一个应用程序,该应用程序具有用于后端API请求的基于JWT的身份验证流。总流程运行良好;登录后,用户将获得长期刷新令牌和短期访问令牌。使用axios插件,我能够在访问令牌过期时自动刷新它

我的问题是,当刷新令牌过期时,我无法捕获错误并重定向用户以重新验证。我尝试过的任何东西都捕捉不到错误。自动刷新挂钩的(当前)代码为:

const refreshAuth = (failed) =>
  axios({ method: "post", url: "token", skipAuthRefresh: true })
    .then(({ status, data: { success, accessToken } }) => {
      console.warn(`status=${status}`);
      if (!success) Promise.reject(failed);

      processToken(accessToken);
      // eslint-disable-next-line no-param-reassign
      failed.response.config.headers.Authorization = `Bearer ${accessToken}`;
      return Promise.resolve();
    })
    .catch((error) => console.error("%o", error));
createAuthRefreshInterceptor(axios, refreshAuth);
在刷新令牌过时或丢失的情况下,我在
catch()
块中既看不到
status=xxx
控制台行,也看不到错误对象的转储

该文件的实际文件位于GitHub上,尽管它与上面的工作版本略有不同。主要是,在GH版本中,钩子调用
axios.post(“token”)。然后(…)
在上面的地方,我进行了一个更明确的调用,以添加
skipAuthRefresh
参数。添加这一点使我在控制台中获得了更详细的错误跟踪,但我仍然无法通过
catch()
捕获401响应

我已经尝试了我能想到的一切。。。我遗漏了什么

兰迪

(编辑以确保GitHub链接指向存在问题的文件版本。)

我的问题是,当刷新令牌过期时,我无法捕获 错误并重定向用户以重新验证。我什么都没试过 捕捉错误。自动刷新挂钩的(当前)代码为:

const refreshAuth = (failed) =>
  axios({ method: "post", url: "token", skipAuthRefresh: true })
    .then(({ status, data: { success, accessToken } }) => {
      console.warn(`status=${status}`);
      if (!success) Promise.reject(failed);

      processToken(accessToken);
      // eslint-disable-next-line no-param-reassign
      failed.response.config.headers.Authorization = `Bearer ${accessToken}`;
      return Promise.resolve();
    })
    .catch((error) => console.error("%o", error));
createAuthRefreshInterceptor(axios, refreshAuth);
如果访问令牌过期,api返回的代码是什么

如果它不同于您需要配置的401(默认值),请参阅exanoke 403:

createAuthRefreshInterceptor(axios, refreshAuthLogic, {
  statusCodes: [ 401, 403 ] // default: [ 401 ]
});

自从发布这篇文章以来,我设法解决了这个问题,并提出了一个可行的解决方案

解决方案的关键在于使用不同的axios实例来调用刷新令牌。我创建了第二个模块来封装第二个axios实例,该实例不会获得由
axios auth refresh
模块创建的拦截器。在解决了最初导致的一些不经意的循环依赖性问题后,我发现当刷新令牌本身过时或丢失时,axios会引发异常


(有趣的是,这导致了另一个问题:一旦我认识到刷新令牌不再有效,我需要注销用户并让他们返回登录屏幕。因为此应用程序是React应用程序,身份验证是通过自定义挂钩处理的,而自定义挂钩只能在组件内调用。但是,我已将所有API调用抽象为一个非React模块,以便我可以封装诸如添加
授权
头、基本URL等内容。在该级别,我无法运行auth hook来访问注销逻辑。我通过在查询对象(对象)上放置默认的
onError
处理程序来解决此问题谢谢,但这不是问题所在(我的后端只返回401的授权错误)。我需要回答我自己的问题,因为我已经找到了解决方案。