CODEWITHSUNDEEP
javascripthttprestangularjsbasic-authentication
PhoenixS
PhoenixS

Reputation: 1026

Globally set custom HTTP header in AngularJS from ngInit

I am unable to set custom HTTP header taken from ngInit in AngularJS.

I set variable using ngInit in html:

<div ng-init="myApiKey='valueOfVar'"></div>

Now I want to use this variable in all HTTP requests. I tried to set it in app.config and in controller too.

I set header with:

$http.defaults.headers.common.Authorization = 'something';

(or via $httpProvider, when in app.config) and then use it in service utilizing $resource. My code looks like [this][1]

I tried to set it in config, in run, in controller and as a service, but nothing worked for me yet. Thank you in advance for any advice given.

Edit: Now I have interceptor:

myApp.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpRequestInterceptor');
});

myApp.factory('httpRequestInterceptor', ['$rootScope', function($rootScope) {
    return {
        request: function($config) {
            $config.headers['Authorization'] = 'Basic ' + $rootScope.apiKey;
            return $config;
        }
    };
}]);

But $rootscope.apiKey (which is set in main controller) is undefined at first call. After that, it's okay (and set).

Upvotes: 0

Views: 15521

Answers (3)

Karim Oukara
Karim Oukara

Reputation: 2706

the following code will allow you to intercept all http requestes of your application and to add a property 'language' in the header of the request

angular.module('app', ['ngRoute', 'ngResource']).run(function($http) {
  $http.defaults.headers.common.language='fr-FR';
});

we can add many properties in the http header

Upvotes: 4

PhoenixS
PhoenixS

Reputation: 1026

OK, so for anybody trying to do the same - Interceptors were the key (thank you Fals a lot), but problem was with the $rootScope. As I wrote in question, when Interceptor was called the first time, $rootScope.apiKey wasn't set yet (on consecutive requests, it was already set).

Right way (or The working way) was to pass variable to AngularJS not through ngInit, but through $window. So I added to my HTML code:

<script>window.apiKey = 'myValue';</script>

and then pass it to Interceptor exactly the same way as $rootScope - You can literally just replace all occurences of $rootScope in edit of my question with $window and now it's working - even for the first request!

Thank you Fals once again.

Upvotes: 1

Fals
Fals

Reputation: 6839

If you wanna modify request/response in AngularJS you should do a deeply read about Interceptor:

  • Angular JS Web Site: $http

You can call $http(config), where config is a object with every configuration. There's a configuration there for headers, where you should put your code:

headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent.

If you google about Interceptor, you will get a full list of blogs explaining how to use It, and providing example codes, here's one that help me out sometime ago:

Understanding angular $http interceptors

Upvotes: 3

Related Questions