使用 react-router 处理 401 未授权代码

Posted 2023-02-21

【中文标题】使用 react-router 处理 401 未授权代码

【英文标题】：Handle 401 unauthorized code with react-router

【发布时间】：2019-11-12 11:34:45

【问题描述】：

我用一个函数来包装一些组件来处理错误，我们称之为：wrapError。

这里有一些要点：

一些组件调用端点来获取信息。 我正在使用 react-router

一切正常，但这里有边缘情况：

当用户的访问令牌过期时，用户可以点击进入另一个页面（组件），新组件会尝试调用其端点，然后由于令牌无效我们会收到401错误，最后请记住，我们有将处理此代码错误的wrapError。

这个错误是通过使用react-router中的push（推送到401页面错误）来处理的，但是push是异步的，所以组件上的代码会一直运行，并在控制台中提示错误。

您知道如何停止流程并重定向到 401 屏幕吗？

function wrapError(callback, errorCode = 401) 
  return callback.catch(e => 
    if (errorCode === error.statusCode) 
      // delete access token

      history.push("/my401page");
... etc 

错误是：

TypeError: Cannot read property 'variable' of undefined...

因为在那一刻端点返回undefined。

【问题讨论】：

在这种情况下使用 fetch 拦截器。 github.com/werk85/fetch-intercept

【参考方案1】：

与react无关。

Cannot read property 'variable' of undefined...

这意味着你想访问对象的属性。但对象未定义。 在您的示例中，您将错误捕获为e，但您将其用作error。

试试这个：

function wrapError(callback, errorCode = 401) 
  return callback.catch(e => 
    if (errorCode === e.statusCode) 
      // delete access token

      history.push("/my401page");
... etc