Question

$http.post('http://localhost:7001/v1/sessions', {
  data: {
    username: $scope.user.username,
    password: $scope.user.password,
    type: 'sessions'
  }
})
.then(function(response) {
  if(response.data.data.token) {
    $http.defaults.headers.common.Authorization = response.data.data.token;
    $state.go('app.dashboard');
  } else {
    $scope.authError = response;
  }
}, function(x) {
  $scope.authError = 'Server Error';
});

我可以确认调用if条件并且存在response.data.data.token。

它进入app.dashboard状态但被ui-router拦截：

$stateProvider.state('app', {
  abstract: true,
  url: '/app',
  templateUrl: 'tpl/app.html',
  resolve: {
    current_user: ['$http', function($http) {
      return $http.get('http://localhost:7001/v1/users/4/entities');
    }]
  }
})

然而，该调用在标题中没有设置任何内容。我认为$http.defaults会在标头中设置默认值。我做错了什么？

Answer 1

您必须使用config方法设置默认标头，而不是service。

示例：

myApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
}]);

只有config您才能配置httpProvider。如果您尝试在服务中执行此操作，则根本不会影响$httpProvider服务。

编辑：

在这种情况下，您必须使用拦截器。

出于全局错误处理，身份验证或任何类型的目的请求或的同步或异步预处理对响应进行后处理，希望能够进行拦截在将它们交给服务器和响应之前请求它们被移交给发起这些的应用程序代码请求。

Refer Angular Docs 拦截器部分

只是一些示例代码：

app.service('APIInterceptor', function($rootScope, UserService) {
    var service = this;

    service.request = function(config) { 
       // check if the token is available. Once the token is available get it here from the UserService.
        var access_token = UserService.getToken() || "unauthorized";
        if (access_token) {
            config.headers.authorization = access_token;
        }
        return config;
    };

    service.responseError = function(response) {
        return response;
    };
})

在config

中

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

Answer 2

我希望您使用一项服务来使用可共享数据。

<强>代码

app.service(dataService, function(){
   this.data = {}
   this.getData = function(){
      return data;
   };

   this.setTokenData = function(token){
      data.token = token;
   }
});

现在您的代码将在设置令牌时使用dataService

  if(response.data.data.token) {
    dataService.setTokenData(response.data.data.token);
    $http.defaults.headers.common.Authorization = dataService.data.token; //dataService.getData().token;
    $state.go('app.dashboard');
  } else {
    $scope.authError = response;
  }

然后从服务解析中你可以使用

$stateProvider.state('app', {
  abstract: true,
  url: '/app',
  templateUrl: 'tpl/app.html',
  resolve: {
    current_user: ['$http', 'dataService', function($http, dataService) {
      $http.defaults.headers.common.Authorization = dataService.getData().token;
      return $http.get('http://localhost:7001/v1/users/4/entities');
    }]
  }
})

为什么$ http不会设置默认标头？

2 个答案: