10

Would there be a way to intercept requests in the $resource call?

I want to add an OAUTHv2 header to it, instead of specifying this for every resource model.

Currently I'm only able to intercept the response, as stated in the docs:

...

interceptor - {Object=} - The interceptor object has two optional methods - response and responseError. Both response and responseError interceptors get called with http response object. See $http interceptors.

I know you can push a global interceptor on $http, but I don't want to include my Bearer token in any request outside API calls (security...)

Anybody who is doing OAUTHv2 must have come across this problem. A pity there is no standard way in Angular.JS...

2 Answers 2

4

Though, it's not obvious, there is a way to intercept $resource request.

Here is an example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Intercept resource request</title>
  <style type="text/css">.ng-cloak { display: none; }</style>
  <script src="angular.js"></script>
  <script src="angular-resource.js"></script>
  <script>
    angular.module("app", ["ngResource"]).
      factory(
        "services",
        ["$resource", function ($resource)
        {
          return $resource(
            "http://md5.jsontest.com/",
            {},
            {
              MD5: 
              {
                method: "GET",
                params: { text: null },
                then: function(resolve)
                {
                  this.params.text = "***" + this.params.text + "***";
                  this.then = null;
                  resolve(this);
                }
              }
            });
        }]).
      controller(
        "Test",
        ["services", function (services)
        {
          this.value = "Sample text";

          this.call = function()
          {
            this.result = services.MD5({ text: this.value });
          }
        }]);
  </script>
</head>
<body ng-app="app" ng-controller="Test as test">
  <label>Text: <input type="text" ng-model="test.value" /></label>
  <input type="button" value="call" ng-click="test.call()"/>
  <div ng-bind="test.result.md5"></div>
</body>
</html> 

How it works:

  1. $resource merges action definition, request params and data to build a config parameter for an $http request.
  2. A config parameter passed into an $http request is treated as a promise like object, so it may contain then function to initialize config.
  3. Action's then function may transform request as it wishes.

The demo can be found at transform-request.html

Elsewhere I've already shown a similar approach used to cancel $resource request.

See also: Intercept angularjs resource request

-1

You can use $http interceptors

You can pass them in options for $resource methods

Article on that: http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

4
  • Yeah I know you can push interceptors globally on the $http object. What I want is to only intercept API calls. I've edited my original question.
    – Pepster
    Jun 6, 2014 at 13:16
  • You can intercept based on any condition of the $http config, so you could easily use a check like config.url.indexOf('/api') === 0 Jun 6, 2014 at 13:23
  • @Pepster there is an example with Session request interceptor in the article I gave you link to. Just add condition for URI
    – vittore
    Jun 6, 2014 at 13:24
  • Thanks, I have asked the question about global interceptor before. I'm looking for the scoped approach as I don't want to do a string compare each time.
    – Pepster
    Jun 6, 2014 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.