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

Question

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

这里有一些重要的点:

一些组件调用端点来获取信息。

我正在使用 react 路由器

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

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

使用 push 处理此错误(推送到 401 页错误)来自 react-router但是 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 .

Answer 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