Friday 9 May 2014

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


6 comments :

  1. It's good post,but I bit confuse that what does use of loginticket and how does it works?

    ReplyDelete
    Replies
    1. This token will be validated from service (Java or .net or what ever )accordingly you can make your user login or logut from application.

      Delete
  2. You are setting the value to a cookie and never used it. Also, what's the purpose of having $cookieStore.put( 'yourmodule', $rootScope.user );this line? I'm trying to use interceptor concept.

    Thanks!

    ReplyDelete
    Replies
    1. As we put in the cookie you can access $rootScope.user until you clear the cookie , for example page refreshing etc. You can destroy the cookie once the user is logged out .

      Delete