$httpprovider 导致“无法读取未定义的属性 'headers'”错误

Question

我有一个带有 node/express 后端的 Angular 应用程序。我尝试使用 httpProvider 实现身份验证拦截器。当本地存储中存储有令牌时，应用程序按预期工作并且我能够从后端检索受限数据，但是一旦我通过注销删除令牌并尝试重定向到主视图，我就会收到 TypeError : 无法读取未定义的属性“标题”。如果我注释掉配置中的代码行，我已经注册了拦截器，错误就消失了。由于某些我无法诊断的原因，除非本地存储中有令牌，否则应用程序会崩溃。

身份验证拦截器：

angular.module('barmehealth')
  .factory('authInterceptor', function(authToken) {

    return {
      request: function(config) {
        var token = authToken.getToken();

        if (token)  {
          config.headers.Authorization = 'Bearer ' + token;

          return config;
        }
      },
      response: function(response) {
       return response;
      }
    };
  });

在Config对象中注册：

$httpProvider.interceptors.push('authInterceptor');

我尝试通过如下更改代码来解决问题：

.factory('authInterceptor', function(authToken) {

  return {
    request: function(config) {
      var currentToken = authToken.getToken();
      var token = currentToken ? currentToken : null;

      if (token)  {
        config.headers.Authorization = 'Bearer ' + token;

        return config;
      }
    },
    response: function(response) {
      return response;
    }
  };
});

Answer 1

您的身份验证拦截器仅有条件地返回config。这是一个逻辑错误。像这样修复它：

request: function(config) {
  var token = authToken.getToken();

  if (token)  {
     config.headers.Authorization = 'Bearer ' + token;
  }

  return config;
}

重要的是不要将您唯一的 return 语句放在 if 块内。否则，如果没有令牌，将不会返回任何配置，事情会变得很糟糕。

抛出错误是因为当没有令牌并且没有返回config 时，角度serverRequest 方法尝试访问config.headers 并发现config 未定义，因为您没有返回它。