CODEWITHSUNDEEP
angularjs
Abdul Rehman Sayed
Abdul Rehman Sayed

Reputation: 6672

Add custom headers to all resources in all modules

In my Angular JS site, I have many modules & many resources (From where I consume Rest API)

I want to add a custom header to all outgoing requests in each & every module.

For eg : Here are 2 modules : common & ABC

//---File 1 common.js
angular.module("common",[])
.config(['$httpProvider',
    function($httpProvider) 
    {
    $httpProvider.defaults.headers.common['x-access-token'] = 
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJOYW1lIjoiQWJkdWwiLCJpYXQiOjE0NjUwMzkwMzgsImV4cCI6MTQ2NTEyNTQzOH0.6BMBuEl2dbL736qUqNYXG29UBn_HRyCyWEmMXSG3euE';
    }
])
.service("commonApi",['$resource',
    function($resource)
    {
        this.getBankList = function()       
        {
            return $resource('api/emi/banklist:quoteId', {  },{}).query(); 
        }
    }]);


//---File 2 abc.js

angular.module("abc",[])
.config(['$httpProvider',
    function($httpProvider) 
    {
    $httpProvider.defaults.headers.common['x-access-token'] = 
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJOYW1lIjoiQWJkdWwiLCJpYXQiOjE0NjUwMzkwMzgsImV4cCI6MTQ2NTEyNTQzOH0.6BMBuEl2dbL736qUqNYXG29UBn_HRyCyWEmMXSG3euE';
    }
])
.factory('emiModel', ['$resource',
    function($resource) {
        return $resource('api/emi/QuoteList:quoteId', {  }, {
        update: {   method: 'PUT'   }
        });
    }])

In the above code, I had to add .config to each module & add the header there.

It is quite time consuming to add it in each module & violates DRY principle.

Is there any simple way by which I can add this configuration to all modules in my app without repeating the code ?

For Carity : I used factory & service just to show that i might be using any thing but I still want the header to be passed.

Upvotes: 0

Views: 110

Answers (1)

Estus Flask
Estus Flask

Reputation: 222760

In the above code, I had to add .config to each module & add the header there.

It is quite time consuming to add it in each module & violates DRY principle.

This isn't true. Once the module is loaded, Angular doesn't make a difference between them.

config block affects each and every module in the app that has common module loaded. I.e. all of $http calls will be affected with config in this setup:

angular.module("app",["abc", "common"])...
angular.module("abc",[])...

Though it is recommended to load common module in each submodule that depends on config, too. So they don't break in the case when they are loaded apart from app (e.g. in specs).

Upvotes: 1

Related Questions