Javascript 使用react路由器处理401未经授权的代码

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

wraperor

这里有一些要点：

• 一些组件调用端点来获取信息
• 我正在使用反应路由器

一切正常，但我们有一个edge案例：

当用户的访问令牌过期时，用户可以单击并转到另一个页面（组件），新组件将尝试调用其端点，然后由于令牌无效，我们将收到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...

---

因为在那一刻，端点返回

未定义

它与react无关

Cannot read property 'variable' of undefined...

这意味着您要访问对象的属性。但对象是未定义的。 在您的示例中，您将错误捕获为

e

，但将其用作

错误

试试这个：

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

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

---

在这种情况下使用fetch拦截器。