CODEWITHSUNDEEP
javascriptangularjsheader
Oliver13
Oliver13

Reputation: 103

How to send a custom header on every request with an angular resource?

I like to send a custom header on every request with an angularjs resource. Before every request the header has to be created again. The following doesn't work. The header is calculated only once and because of this only one request works. A second request on the same resource fails. Its a lot of copy n paste of "headers: authhandler.createHeader()" also ...

myApp.service('Rest', ['$resource', 'authhandler',
        function($resource, 'authhandler',{
            return {
                User: $resource( api_domain + "/api/users/:userid", {}, {
                    get: {method: 'GET', headers: authhandler.createHeader()},
                    remove: {method: 'DELETE', headers: authhandler.createHeader()},
                    edit: {method: 'PUT', headers: authhandler.createHeader()},
                    add: {method: 'POST', headers: authhandler.createHeader()},
                    patch: {method: 'PATCH', headers: authhandler.createHeader()}
                }),
            };
        }]);

Has someone an idea how to solve this ? I had a working solution but I don't like it because of huge amount of copy and paste source code:

myApp.controller('MyController', function(RestResource, authhandler, $routeParams) {
    $http.defaults.headers.common = authhandler.createHeader();
    RestResource.get({userid: $routeParams.id}, function(result) {
        //...
    });
});

I Would be very happy about hints how to solve this ! Thanks in advance!

Upvotes: 1

Views: 1349

Answers (1)

a better oliver
a better oliver

Reputation: 26828

You can use a request transformer:

function($resource, 'authhandler',{
   return {
        User: $resource( api_domain + "/api/users/:userid", {}, {
            get: {
                  method: 'GET',
                  transformRequest: function(data, headersGetter) {
                    var currentHeaders = headersGetter();
                    angular.extend(currentHeaders, authhandler.createHeader());
                    return data;
                  }
                },

You could also add the transformer to all requests:

myApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.transformRequest.push(function(data, headersGetter) {
                    var currentHeaders = headersGetter();
                    angular.extend(currentHeaders, authhandler.createHeader());
                    return data;
                  });

That way you don't have to configure anything or your resources.

Upvotes: 4

Related Questions