angular function dependency - javascript

Where do i place the common handleError and handleSuccess functions.
These are common functions that will be used by every service. where is the best place to put these functions. Should i put theses as global functions and inject them as dependency.
(function () {
"use strict";
angular.module('myApp.Group')
.service('GroupService', function ($http, $q, $location, Environment) {
// I transform the error response, unwrapping the application dta from
// the API response payload.
function handleError(response) {
// The API response from the server should be returned in a
// nomralized format. However, if the request was not handled by the
// server (or what not handles properly - ex. server error), then we
// may have to normalize it on our end, as best we can.
if (!angular.isObject(response.data) || !response.data.message) {
return ($q.reject("An unknown error occurred."));
}
// Otherwise, use expected error message.
return ($q.reject(response.data.message));
}
// I transform the successful response, unwrapping the application data
// from the API response payload.
function handleSuccess(response) {
return (response.data);
}
this.remove = function (id) {
var request = $http({
method: "delete",
url: '/group/' + id
});
return (request.then(handleSuccess, handleError));
};
});
}());

Here's how we do it:
We use the $httpProvider to intercept the responses and deal with each code on their own. We made a service to handle this functionality.
Our app config looks like this:
appModule.config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide',
function ($routeProvider, $locationProvider, $httpProvider, $provide) {
// Http interceptor to handle session timeouts and basic errors
$httpProvider.responseInterceptors.push(['httpHandlersSrv', function (httpHandlersSrv) {
return function (promise) { return promise.then(httpHandlersSrv.success, httpHandlersSrv.error); };
}]);
routeProvider = $routeProvider;
$locationProvider.html5Mode(true);
}
]);
This is what our $httpHandlersSrv looks like where we handle errors. Notice we just pass the successful responses along without doing anything:
angular.module('appModule').factory('httpHandlersSrv', ['$q', '$location', '$rootScope', 'toaster', '$window', function ($q, $location, $rootScope, toaster, $window) {
return {
success: function (response) {
return response;
},
error: function (response) {
switch (response.status) {
case 0:
//Do something when we don't get a response back
break;
case 401:
//Do something when we get an authorization error
break;
case 400:
//Do something for other errors
break;
case 500:
//Do something when we get a server error
break;
default:
//Do something with other error codes
break;
}
return $q.reject(response);
}
};
}]);

Related

Circular dependency found in angular js

Tring to add interceptor header for my every request, however, it is giving me below error.
Uncaught Error: [$injector:cdep] Circular dependency found: $http <- Auth <- httpRequestInterceptor <- $http <- $templateRequest <- $route
app.js
var app= angular.module('myDemoApp',['ngRoute'])
app.factory('httpRequestInterceptor', ['Auth', function (Auth) {
return {
request: function (config) {
config.headers['x-access-token'] = Auth.getToken();
return config;
}
};
}]);
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
});
Auth Service
(function () {
'use strict';
myDemoApp.factory('Auth', ['$http', '$window', Auth]);
/******Auth function start*****/
function Auth($http, $window) {
var authFactory = {};
authFactory.setToken = setToken;
authFactory.getToken = getToken;
return authFactory;
/*setToken function start*/
function setToken(token) {
if (token) {
$window.localStorage.setItem('token', token);
} else {
$window.localStorage.removeItem('token');
}
}
/*getToken function start*/
function getToken() {
return $window.localStorage.getItem('token')
}
}
})();
You can't do this because.
You have created httpRequestInterceptor which intercepts all $http requests.
Now, you are passing Auth in the httpRequestInterceptor.
If you'll see, Auth uses $http request inside itself.
So, your interceptor can itself cause a http request using Auth.
Hence, its circular error and angularjs wont allow you to do that !
Remove $http from Auth factory OR dont insert a service into interceptor which itself uses $http.
I hope you got, how the infinite loop chain being created, hence a circular dependency error !

Angular "Response is undefined" when attempting to implement a global error handler for a resource

I'm new to angular and attempting to create a global error handler. Any time a resource is called with a 500 http status, I'd like to redirect to a generic error page.
Whenever I implement an injector, I get a "response is undefined" error. What am I doing wrong? I currently have the redirect commented out and still receive the error.
var appServices = angular.module('appServices', ['ngResource']);
appServices.factory('ApplicationService', ['$resource', function ($resource) {
return $resource('http://localhost:23357/api/application/:id', { id: '#id' }, {
update: {
method: 'PUT'
}
});
}]);
appServices.factory('globalErrorInterceptor', ['$location', '$q', '$injector', function ($location, $q, $injector) {
return {
'responseError': function (r) {
console.log('global error test');
/*
commented out for testing
if (r.status == 500) {
$location.path('/error');
}
else
return $q.reject(r);
*/
return $q.reject(r);
}
}
}]);
appServices.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('globalErrorInterceptor')
}]);
Then in my controller I call the resource like so. Currently the web service is setup to always return back a 500.
$scope.applications = ApplicationService.query();
I needed to always return the $q.reject, so the working interceptor looks like:
appServices.factory('globalErrorInterceptor', ['$location', '$q', '$injector', function ($location, $q, $injector) {
return {
'responseError': function (r) {
console.log(r);
if (r.status == 500) {
$location.path('/error');
}
return $q.reject(r);
}
}
}]);

Angular JS Interceptor to handle HTTP Error status

I use AngularJS for my application and ui-route. A service in my application looks like this:
(function() {
'use strict';
angular
.module('myProject.myModule')
.factory('myService', myService);
myService.$inject = ['$http', 'api_config'];
function myService($http, api_config) {
var service = {
myServiceMethod1: myServiceMethod1,
...
};
return service;
////////////
function myServiceMethod1(params) {
return $http.get(api_config.BASE_URL + '/path');
}
Now I will implement an (global) intercetor in that way that any time a response status is HTTP 403 the interceptor should handle it.
This interceptor should be globally.
Thanks a lot!
Try something like
angular
.module('myProject.myModule')
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(['$q', '$location', function ($q, $location) {
return {
'responseError': function(response) {
if(response.status === 401 || response.status === 403) {
$location.path('/signin'); // Replace with whatever should happen
}
return $q.reject(response);
}
};
}]);
}]);

Angular JS Method GET inside RUN after CONFIG

I need to do a request inside the RUN method to retrieve de user data from an api.
The first page (home), depends on the user data.
This is the sequence of dispatchs in my console:
CONFIG
RUN
INIT GET USER DATA
SIDEBAR
HOME
SUCCESS GET USER DATA
My problem is, i need to wait user data before call sidebar and home (controller and view) and i don't know how can i do this.
UPDATE
I have this until now:
MY CONFIG:
extranet.config(['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
// My ROUTE CONFIG
console.log('CONFIG');
}]);
My RUN:
extranet.run(function($rootScope, $location, $http, Cookie, Auth, Session) {
console.log('RUN');
var token = Cookie.get('token');
// The login is done
var success = function (data) {
Session.create(data);
console.log('USER DATA SUCCESS');
};
var error = function () {
$location.path('/login');
};
// GET USER DATA
Auth.isAuthenticated().success(success).error(error);
});
MY CONTROLLER MAIN:
extranet.controller('MainCtrl', function ($scope, $location) {
console.log('MAIN CONTROLLER');
});
By using resolver
extranet.config(['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
// My ROUTE CONFIG
$routeProvider.when('/', {
templateUrl: "/app/templates/sidebar.html",
controller: "siderbarController",
title: "EventList",
resolve: {
events: function ($q, Cookie,Session) {
var deffered = $q.defer();
Cookie.get('token').$promise
.then(function (events) {
Session.create(data);
console.log('USER DATA SUCCESS');
deffered.resolve(events);
}, function (status) {
deffered.reject(status);
});
return deffered.promise;
}
}
}]);
I hope you get some idea.
If you are using AngularJS methods for server requests you will get a promise. A promise gets resolved as soon as the response is recieved. All defined callbacks "wait" until the resolve.
Naive solution
So, you will use $http or even $resource if you have a REST-like backend:
var promise = $http.get(userDataUrl, params)
$rootScope.userDataPromise = promise;
After that you can use that promise whereever you need the data:
$rootScope.userDataPromise.then(myCallback)
Better solution
Using $rootScope for that purpose is not an elegant solution though. You should encapsulate the Userdata stuff in a service and inject it whereever you need it.
app.factory('UserData', ['$http',
function($http) {
var fetch = function() {
return $http.get(userDataUrl, params)
};
return {
fetch: fetch
};
}
]);
Now you can use that service in other modules:
app.controller('MainCtrl', ['$scope', 'UserService',
function ($scope, UserService) {
var update = function(response) {
$scope.userData = response.userData;
}
var promise = UserService.fetch();
promise.then(update)
}
);

AngularJS: Injecting service into a HTTP interceptor (Circular dependency)

I'm trying to write a HTTP interceptor for my AngularJS app to handle authentication.
This code works, but I'm concerned about manually injecting a service since I thought Angular is supposed to handle this automatically:
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(function ($location, $injector) {
return {
'request': function (config) {
//injected manually to get around circular dependency problem.
var AuthService = $injector.get('AuthService');
console.log(AuthService);
console.log('in request interceptor');
if (!AuthService.isAuthenticated() && $location.path != '/login') {
console.log('user is not logged in.');
$location.path('/login');
}
return config;
}
};
})
}]);
What I started out doing, but ran into circular dependency problems:
app.config(function ($provide, $httpProvider) {
$provide.factory('HttpInterceptor', function ($q, $location, AuthService) {
return {
'request': function (config) {
console.log('in request interceptor.');
if (!AuthService.isAuthenticated() && $location.path != '/login') {
console.log('user is not logged in.');
$location.path('/login');
}
return config;
}
};
});
$httpProvider.interceptors.push('HttpInterceptor');
});
Another reason why I'm concerned is that the section on $http in the Angular Docs seem to show a way to get dependencies injected the "regular way" into a Http interceptor. See their code snippet under "Interceptors":
// 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 || $q.when(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 || $q.when(response);
},
// optional method
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
};
}
});
$httpProvider.interceptors.push('myHttpInterceptor');
Where should the above code go?
I guess my question is what's the right way to go about doing this?
Thanks, and I hope my question was clear enough.
This is what I ended up doing
.config(['$httpProvider', function ($httpProvider) {
//enable cors
$httpProvider.defaults.useXDomain = true;
$httpProvider.interceptors.push(['$location', '$injector', '$q', function ($location, $injector, $q) {
return {
'request': function (config) {
//injected manually to get around circular dependency problem.
var AuthService = $injector.get('Auth');
if (!AuthService.isAuthenticated()) {
$location.path('/login');
} else {
//add session_id as a bearer token in header of all outgoing HTTP requests.
var currentUser = AuthService.getCurrentUser();
if (currentUser !== null) {
var sessionId = AuthService.getCurrentUser().sessionId;
if (sessionId) {
config.headers.Authorization = 'Bearer ' + sessionId;
}
}
}
//add headers
return config;
},
'responseError': function (rejection) {
if (rejection.status === 401) {
//injected manually to get around circular dependency problem.
var AuthService = $injector.get('Auth');
//if server returns 401 despite user being authenticated on app side, it means session timed out on server
if (AuthService.isAuthenticated()) {
AuthService.appLogOut();
}
$location.path('/login');
return $q.reject(rejection);
}
}
};
}]);
}]);
Note: The $injector.get calls should be within the methods of the interceptor, if you try to use them elsewhere you will continue to get a circular dependency error in JS.
You have a circular dependency between $http and your AuthService.
What you are doing by using the $injector service is solving the chicken-and-egg problem by delaying the dependency of $http on the AuthService.
I believe that what you did is actually the simplest way of doing it.
You could also do this by:
Registering the interceptor later (doing so in a run() block instead of a config() block might already do the trick). But can you guarantee that $http hasn't been called already?
"Injecting" $http manually into the AuthService when you're registering the interceptor by calling AuthService.setHttp() or something.
...
I think using the $injector directly is an antipattern.
A way to break the circular dependency is to use an event:
Instead of injecting $state, inject $rootScope.
Instead of redirecting directly, do
this.$rootScope.$emit("unauthorized");
plus
angular
.module('foo')
.run(function($rootScope, $state) {
$rootScope.$on('unauthorized', () => {
$state.transitionTo('login');
});
});
Bad logic made such results
Actually there is no point of seeking is user authored or not in Http Interceptor. I would recomend to wrap your all HTTP requests into single .service (or .factory, or into .provider), and use it for ALL requests. On each time you call function, you can check is user logged in or not. If all is ok, allow send request.
In your case, Angular application will send request in any case, you just checking authorization there, and after that JavaScript will send request.
Core of your problem
myHttpInterceptor is called under $httpProvider instance. Your AuthService uses $http, or $resource, and here you have dependency recursion, or circular dependency. If your remove that dependency from AuthService, than you will not see that error.
Also as #Pieter Herroelen pointed, you could place this interceptor in your module module.run, but this will be more like a hack, not a solution.
If your up to do clean and self descriptive code, you must go with some of SOLID principles.
At least Single Responsibility principle will help you a lot in such situations.
If you're just checking for the Auth state (isAuthorized()) I would recommend to put that state in a separate module, say "Auth", which just holds the state and doesn't use $http itself.
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(function ($location, Auth) {
return {
'request': function (config) {
if (!Auth.isAuthenticated() && $location.path != '/login') {
console.log('user is not logged in.');
$location.path('/login');
}
return config;
}
}
})
}])
Auth Module:
angular
.module('app')
.factory('Auth', Auth)
function Auth() {
var $scope = {}
$scope.sessionId = localStorage.getItem('sessionId')
$scope.authorized = $scope.sessionId !== null
//... other auth relevant data
$scope.isAuthorized = function() {
return $scope.authorized
}
return $scope
}
(i used localStorage to store the sessionId on client side here, but you can also set this inside your AuthService after a $http call for example)

Categories