Dynamic Resource Headers

Question

I would like to have service providing a resource as in the following code:

   angular.module('myApp.userService', ['ngResource'])
  .factory('UserService', function ($resource)
  {
    var user = $resource('/api/user', {},
          {
            connect: { method: 'POST', params: {}, isArray:false }
          });
    return user;
  }

Then when using the connect action, I would like to dynamically pass a HTTP header, meaning that it may change for each call. Here is an example, in the controller, please see the comment in the code :

 $scope.user = UserService;

 $scope.connect = function ( user )
        {
          var hash = 'Basic ' + Base64Service.encode(user.login + ':' + user.password);

          // I would like this header to be computed 
          // and used by the user resource
          //  each time I call this function
          $scope.user.headers = [{Authorization: hash}];

          $scope.user.connect( {},
              function()
              {
                  // successful login
                  $location.path('/connected');
              }
              ,function()
              {
                  console.log('There was an error, please try again');
              });
       }

Do you know a way to do that, either directly or via a trick?

---

Final thoughts

Accepted answer does not fully answer the question as the headers are not totally dynamic because the factory returns actually a factory (!) which is not the case in my code.

As $resource is a factory, there is no way to make it dynamic.

I finally destroy the resource object each time the user connects. This way, I have the resource with a header computed when the user connects.

The solution provided by @Stewie is useful for that, so I keep it as accepted.

---

Here is how I did the connect, which can be used multiple times as the resource is destroyed/recreated when (re)connecting:

 this.connect = function (user)
 {
    self.hash = 'Basic ' + Base64Service.encode(user.login + ':' + user.password);
console.log("CONNECT login:" + user.login + " - pwd:" + user.password + " - hash:" + self.hash);

if (self.userResource)
{
  delete self.userResource;
}

self.userResource = $resource('/api/user/login', {}, {
  connect: {
    method: 'POST',
    params: {},
    isArray: false,
    headers: { Authorization: self.hash }
  }
});

var deferred = $q.defer();
self.userResource.connect(user,
  function (data)
  {
    //console.log('--------- user logged in ----- ' + JSON.stringify(data));
    // successful login
    if (!!self.user)
    {
      angular.copy(data, self.user);
    }
    else
    {
      self.user = data;
    }

    self.setConnected();

    storage.set('user', self);

    deferred.resolve(self);
  },
  function (error)
  {
    self.user = {};
    self.isLogged = false;

    storage.set('user', self);

    deferred.reject(error);
  }
);

return deferred.promise;

};

Comedietta

"... to path a dynamical HTTP header"?? – Darceldarcey

@Comedietta To complete your own answer, could you show how do you "destroy the resource object each time the users connect" please ? (I've got the same issue and would like to make this kind of reload of factory.) – Hydrophane

@Hydrophane Here you go, I added an example. – Comedietta

Thank you very much @unludo. For all, notice that you upgrade your codding style within a year (using the controllerAs option to expose methods attached to your controller instead of scope). – Hydrophane

Actually I just modified ngResource for my own use case(modify headers according to request body). Feeling great... – Reel

Answer 1

Starting from angularjs v1.1.1 and ngResource v.1.1.1 this is possible to accomplish using the headers property of the $resource action object.

You may wrap your resource in a function which accepts custom headers as a parameter and returns a $resource object with your custom headers set at the appropriate action definitions:

PLUNKER

var app = angular.module('plunker', ['ngResource']);

app.controller('AppController',
  [
    '$scope',
    'UserService',
    function($scope, UserService) {
      $scope.user = {login: '[email protected]', password: '123'};

      $scope.connect = function() {
        // dropping out base64 encoding here, for simplicity
        var hash = 'Basic ' + $scope.user.login + ':' + $scope.user.password;
        $scope.user.headers = [{Authorization: hash}];

        UserService({Authorization: hash}).connect(
          function () {
            $location.url('/connected');
          },
          function () {
            console.log('There was an error, please try again');
          }
        );

      };

    }
  ]
);

app.factory('UserService', function ($resource) {
  return function(customHeaders){
    return $resource('/api/user', {}, {
      connect: { 
        method: 'POST',
        params: {},
        isArray: false,
        headers: customHeaders || {}
      }
    });
  };

});

Darceldarcey

thanks, that looks neat. Yet to be tested, but I think it's the stuff :) – Comedietta

Well it's not totally dynamic because the factory returns actually a factory which is not the case in my code. Not sure if what I want to do is achievable. As $resource is a factory, there is no way to make it dynamic. – Comedietta

"... there is now way to make it dynamic" - Doesn't my answer prove otherwise? – Darceldarcey

I have to destroy the resource if the login/password is not correct. In this sense, I think it's not totally dynamic. Please see my updated question as I give more details on this. – Comedietta

@Darceldarcey This works great! Thanks so much! I've been looking for a way to pass dynamic headers to $resource but transformRequest was not helpful at all. This way it works great. But the question is, what might be the side effects? – Unctuous

Answer 2

I set my Services up a little differently.

angular.module('MyApp').factory('UserService',function($resource, localStorageService) {

    var userResource = function(headers) {
        return $resource("api/user", {},
            {
                get: {
                    method: 'GET',
                    headers: headers
                },

                create: {
                    method: 'POST',
                    headers: headers
                }
            }
        );
    };

    return {

        api: userResource,

        get: function(userid){
            var service = this;
            return service.api({"token": "SomeToken"}).get({userid: userid}, function (data){
                return data;
            });
        },

        create: function(user){
            var service = this;
            return service.api({"token": localStorageService.get("token")}).create({user: user}, function (data){
                return data;
            });
        }

    };

});

Selenaselenate