Почему $ http не задает заголовок по умолчанию?

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.

EDIT:

Вы должны использовать перехватчики в этом сценарии.

Для целей глобальной обработки ошибок, аутентификации или любого вида синхронной или асинхронной предварительной обработки запроса или постобработки ответов, то желательно, чтобы иметь возможность перехватывать запросов, прежде чем они будут переданы в сервер и ответы до , они передаются в код приложения, который инициировал эти запросы .

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'); 
    }] 
    } 
})