$provide.factory('myHttpInterceptor', function($q) {
return {
// optional method
'request': function(config) {
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
console.log(config);
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
//if (canRecover(rejection)) {
// return responseOrNewPromise;
//}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
I want when client request file '.html', it won't call to server ever. Instead I will use requireJS. How can I response this data from requirejs to client?
Related
I want to intercepts only remote server calls.
I tried implementing Angular http interceptor but even it is intercepting local template call.
I got every request on console and check request made in Network Tab. It is differ in numbers.
I want reset session timeout on server call
$httpProvider.interceptors.push(function($rootScope) {
return {
'request': function(config) {
return config;
},
'response': function(response) {
return response;
},
'responseError': function(rejection) {
if (rejection.status === 401) {
location.reload();
}
return $q.reject(rejection);
}
};
});
Able to resolve it using $templateCache
Ref - Angular HTTP interceptor executed for embedded ng-templates
Below is the code if someone needed
$httpProvider.interceptors.push(function ($q, $rootScope,$templateCache) {
return {
'request': function(config) {
if( $templateCache.get(config.url) === undefined ){
console.log("Interceptor --> "+ config.url + " -" + $templateCache);
$rootScope.Idle.watch();
console.log(new Date());
}
return config;
},
'response': function (response) {
//Will only be called for HTTP up to 300
console.log(response);
return response;
},
'responseError': function (rejection) {
if(rejection.status === 401) {
location.reload();
}
return $q.reject(rejection);
}
};
});
Is it possible to set a default action for $http in my app?
The idea would be that if any $http call in a controller, or service of my app would return 405, I could change to state 'login'
Something like this (of course this will not work at all, but I guess that shows the idea)
angular.module('app',[]).config(function($http){
$http.error(function(error,state){
if (state===405){
do stuff
}
);
You can use interceptors to achieve this.
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
// alternatively, register the interceptor via an anonymous factory
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
return {
'request': function(config) {
// same as above
},
'response': function(response) {
// same as above
}
};
});
Read more about it here
You should do something like this:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
//Do whatever you want on success
}, function errorCallback(response) {
if(response.status == 405) {
//Go to login
}
});
Below code might help you:
$http.get("url")
.success(function (data, status, headers, config) {
$scope.content = data;
if (data == '405') {
$state.go('login', {id: the_necesarry_id});
}
else {window.alert(' ');}
})
.error(function (data, status, headers, config) {
});
use angularjs Interceptors
// interceptors.js
.factory('httpInterceptor', function ($q, $injector) {
return {
'requestError': function(rejection) {
// do something on error
if(rejection.status === 405){
$injector.get('$state').transitionTo('login');
}
return $q.reject(rejection);
},
'responseError': function(rejection) {
// do something on error
if(rejection.status === 405){
$injector.get('$state').transitionTo('login');
}
return $q.reject(rejection);
}
};
});
// app.js
app.config( function ($httpProvider, $interpolateProvider, $routeProvider) {
$httpProvider.interceptors.push('httpInterceptor');
...
});
I'm rather confused over the difference between a factory and a service and why one would choose one over the other. Here I have a factory but is it possible to write as a service and if so what would it look like? Also what's the advantage of using a service or a factory here?
app.factory('testInterceptor', ['$q', function ($q) {
return {
'request': function (config) {
return config;
},
// optional method
'requestError': function (rejection) {
return $q.reject(rejection);
},
// optional method
'response': function (response) {
return response;
},
// optional method
'responseError': function (rejection) {
return $q.reject(rejection);
}
}
}]);
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('testInterceptor');
}])
I want to capture all request going out from my one page application like clicking on different tab or any hyperlink.
I have written an interceptor and want to put a ajax call for all request.
.factory('httpRequestInterceptor', function($q,$http){
return {
request: function($http,config){
window.alert(config.url);
var dummyValue = $http.get("url");
return config;
}
}
})
.config(function($httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
});
I think you are in search of http logger kind of factory. You can use this one
.config(function ($provide, $httpProvider) {
// Intercept http calls.
$provide.factory('MyHttpInterceptor', function ($q) {
return {
// On request success
request: function (config) {
console.log(config); // Contains the data about the request before it is sent.
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError: function (rejection) {
console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failture
responseError: function (rejection) {
console.log(rejection); // Contains the data about the error.
// Return the promise rejection.
return $q.reject(rejection);
}
};
});
// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');
});
I tested, it works for routeProvider navigation as well. For more information please check this blog https://djds4rce.wordpress.com/2013/08/13/understanding-angular-http-interceptors/
I'd like to implement authentication on a single page web app with Angular.js. The official Angular documentation recommends the using of interceptors:
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// ...
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
The problem is when the server sends 401 error, the browser immediately stops with "Unauthorized" message, or with login pop-up window (when authentication HTTP header is sent by the server), but Angular can't capture with it's interceptor the HTTP error to handle, as recommended. Am I misunderstanding something? I tried more examples found on web (this, this and this for example), but none of them worked.
For AngularJS >1.3 use $httpProvider.interceptors.push('myHttpInterceptor');
.service('authInterceptor', function($q) {
var service = this;
service.responseError = function(response) {
if (response.status == 401){
window.location = "/login";
}
return $q.reject(response);
};
})
.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
}])
in app config block:
var interceptor = ['$rootScope', '$q', "Base64", function(scope, $q, Base64) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
//AuthFactory.clearUser();
window.location = "/account/login?redirectUrl=" + Base64.encode(document.URL);
return;
}
// otherwise
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
}
}];
I don't know why, but response with 401 error goes into success function.
'responseError': function(rejection)
{
// do something on error
if (rejection.status == 401)
{
$rootScope.signOut();
}
return $q.reject(rejection);
},
'response': function (response) {
// do something on error
if (response.status == 401) {
$rootScope.signOut();
};
return response || $q.when(response);
}
AngularJS interceptors only work for calls made with the $http service; if you navigate to a page that returns a 401, AngularJS never even runs.