Menu
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...
384
To intercept HTTP requests, use the webRequest API. This API enables you to add listeners for various stages of making an HTTP request. In the listeners, you can: Get access to request headers and bodies and response headers.
Your best option is to use a proxy on your server, and route the iframe request through there; re-writing all asset URL's through your proxy instead of direct access (but even then you have impossible edge cases to track, such as JavaScript including other assets etc etc.
The Fetch API doesn't support interceptors natively. However, there are other libraries for making HTTP calls that support interceptors.
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>
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
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
