Set headers for all $http calls in angular js

Angular js providing an option to set a common headers for all $http calls (get, post etc).

This is very important as part of security, we have to use a authentication token or id that is getting while logging into the application. It is not easy to set authentication id or token manually for all $http calls .So we can attach a common header for all $http calls so that service can read that while making all calls so that application will be more secure .

I have explained same using Angular 4 concept as well, check this link for that.

There are many ways .

1. Set on $http

2. Using interceptor concept

3. Only for particular $http calls

1. Set on $http

angular.module('yourmodule').run(function($http) {
  
  $http.defaults.headers.common.Authorization = 'login YmVlcDpi' ;
  //or try this
  $http.defaults.headers.common['Auth-Token'] = 'login YmVlcDpi';

});

We can check with a real scenario.

$rootScope.user = { username: model.username, authenticationid:id};
//Setting Cookie
$cookieStore.put( 'yourmodule', $rootScope.user );

Here I am saving username and authentication id to a cookie (you can use session also).

var id = $rootScope.user.authenticationid ;

angular.module('yourmodule').run(function($http) {
  
  $http.defaults.headers.common.Authorization = id ;
  //or try this 
  $http.defaults.headers.common['Auth-Token'] = id;
 
});

Now check in the network or console you can see all $http calls have the common header.

2. Using interceptor concept

angular.module('yourmodule').factory('httpRequestInterceptor',
['$rootScope', function($rootScope)
 {
  return {
   request: function($config) {
    if( $rootScope.user.loginticket )
    {
     $config.headers['your-auth-ticket'] = $rootScope.user.loginticket;
    }
  return $config;
  }
 };
}]);
 

Add this into app config .

$httpProvider.interceptors.push('httpRequestInterceptor');
 

3. Only for particular $http calls

 var data = {
    somedata :data.data
  };
 var url = 'your webservcie url';
 
 $http.post(url,angular.toJson(data),{
 headers: {'login_token': 'login YmVlcDpi'}
 })
 .success( function( data )
 {
    success(data);
 })
 .error( function( data)
 {
   error(data);
 });

Related Posts

1. Angular routing

2. Rating Stars using angular js Directive concept

3. Communication between factory file and controller in Angular js

4. Communicate with controllers in angular js

5. Client side pagination using angular js