How to intercept $resource requests

Question

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...

score 4 · Answer 1 · edited May 23 '17 at 11:46

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:

$resource merges action definition, request params and data to build a config parameter for an $http request.
A config parameter passed into an $http request is treated as a promise like object, so it may contain then function to initialize config.
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

score -1 · Answer 2 · answered Jun 06 '14 at 13:11

-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/

answered Jun 06 '14 at 13:11

vittore

17,449
6
44
82

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 06 '14 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` – Joseph Yaduvanshi Jun 06 '14 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 06 '14 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 06 '14 at 13:38

How to intercept $resource requests

2 Answers2

How it works: