How to pass headers on the fly to $resource for angularjs

Question

Right now, the only way that I know for setting tokens in headers dynamically for an angularjs call is via $http like so:

return $http.get({
  url: 'https://my.backend.com/api/jokes',
  params: {
    'jokeId': '5',
  },
  headers: {
    'Authorization': 'Bearer '+ $scope.myOAuthToken
  }
});

But I want to figure out how to pass this via $resource, here's some pseudo-code that doesn't work:

...
.factory('myFactory',
  ['$resource',
    function($resource){
      return {
        jokes: $resource('https://my.backend.com/api/jokes', null, {
          query: {
            method: 'GET'
          }
        })
      };
    }
  ]
);
...
return myFactory.jokes.query({
  'jokeId': '5',
  'headers': {
    'Authorization': 'Bearer '+ $scope.myOAuthToken
  }
});

How can I pass headers on the fly to $resource for angularjs?

ScottFoster1000 · Accepted Answer · 2020-03-27 20:24:32Z

36

I don't think this can be done the way you are trying, as the config object is not available on action method. But the action config method has it. So what you can do is, rather than returning resource directly, create a function that takes a parameter the authorization token and then construct the resource and return.

return {
    jokes: function (token) {
        return $resource('https://my.backend.com/api/jokes', null, {
            query: {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + token
                }
            }
        })
    }
};

Then call the service function as:

myFactory.jokes($scope.myOAuthToken).query({'jokeId': '5'});

edited Mar 27, 2020 at 20:24

ScottFoster1000

6272 gold badges12 silver badges28 bronze badges

answered Sep 10, 2014 at 17:21

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prasanthv Over a year ago

I tried it out, worked like a charm! Thanks @Chanermani! Sample Code:

sample.factory('Restricted', ['$resource', function($resource){     return {         createRestrictedResource: function(token) {             return $resource('/api/v1/restricted', null, {query: {headers: {'Authorization': 'Bearer ' + token}}});         }     } }]);

Collectives™ on Stack Overflow

How to pass headers on the fly to $resource for angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related