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

Question

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

这里有一些重要的要点：

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

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

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

它与反应无关。

Cannot read property 'variable' of undefined...

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

尝试这个：

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

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