$http Auth Headers in AngularJS

Question

I have an angular application that is hitting a node API. Our backend developer has implemented basic auth on the API, and I need to send an auth header in my request.

I've tracked down:

$http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password);

I've tried:

.config(['$http', function($http) {
       $http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' +    password);
}])

As well as appending it directly to the request:

$http({method: 'GET', url: url, headers: {'Authorization': 'Basic auth'}})})

But nothing works. How to solve this?

really strange ... you don't have other things in your config or are you behind a proxy something like that ? — Thomas Pons
– Thomas Pons, Commented Sep 18, 2013 at 18:23

Eliran Malka · Accepted Answer · 2014-03-19 21:05:36Z

33

You're mixing the use cases; instantiated services ($http) cannot be used in the config phase, while providers won't work in run blocks. From the module docs:

Configuration blocks - […] Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

Run blocks - […] Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

So use either of the following:

app.run(['$http', function($http) {
    $http.defaults.headers.common['Authorization'] = /* ... */;
}]);

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common['Authorization'] = /* ... */;
}])

answered Mar 19, 2014 at 21:05

Eliran Malka

16.4k7 gold badges80 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Arepalli Praveenkumar Over a year ago

Why cannot we write $http.defaults.headers.common['Authorization'] = /* ... */; in controller level?

pascalwhoop Over a year ago

because its a configuration thing, and you're working on one concrete instance of that service.

Danny Bullis Over a year ago

Is there a particular reason for using ['Authorization'] versus just .Authorization ?

Eliran Malka Over a year ago

@DannyBullis - just a convention, AFAIK. perhaps that convention was made for convenience; more than often you'll have the HTTP headers as constants somewhere, so addressing the key by using a string allows you to use those constants as key references, e.g. $http.defaults.headers.common[HTTP_HEADER_KEY_AUTH].

Danny Bullis Over a year ago

@natureminded thanks, yeah I know that. I was just curious about the stylistic approach. Using square bracket notation allows for using arbitrary property values to define which property you are accessing, whereas dot notation targets only a specific, non-dynamically defined property. This convention is much more widely used in JavaScript than just in this specific instance, but I wasn't sure if there was some other specific reason for using square brackets here. I just needed clarification :) thanks for your help guys.

|

britztopher · Accepted Answer · 2014-06-09 18:53:53Z

I have a service factory that has an angular request interceptor like so:

var module =  angular.module('MyAuthServices', ['ngResource']);

module
    .factory('MyAuth', function () {
    return {
        accessTokenId: null
    };
})    
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('MyAuthRequestInterceptor');
})

.factory('MyAuthRequestInterceptor', [ '$q', '$location', 'MyAuth',
    function ($q, $location, MyAuth) {
        return {
            'request': function (config) {


                if (sessionStorage.getItem('accessToken')) {

                    console.log("token["+window.localStorage.getItem('accessToken')+"], config.headers: ", config.headers);
                    config.headers.authorization = sessionStorage.getItem('accessToken');
                }
                return config || $q.when(config);
            }
            ,
            responseError: function(rejection) {

                console.log("Found responseError: ", rejection);
                if (rejection.status == 401) {

                    console.log("Access denied (error 401), please login again");
                    //$location.nextAfterLogin = $location.path();
                    $location.path('/init/login');
                }
                return $q.reject(rejection);
            }
        }
    }]);

Then on logging in in my login controller I store the accesstoken using this line:

sessionStorage.setItem('currentUserId', $scope.loginResult.user.id);
sessionStorage.setItem('accessToken', $scope.loginResult.id);
sessionStorage.setItem('user', JSON.stringify($scope.loginResult.user));
sessionStorage.setItem('userRoles', JSON.stringify($scope.loginResult.roles));

This way I can assign the headers to the request on every request made after I log in. This is just the way I do it, and is totally up for criticism, but it appears to work very well.

Rayann Nayran · Accepted Answer · 2017-02-10 14:07:24Z

13

You can use it in the controller:

.controller('Controller Name', ['$http', function($http) {
   $http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password;
}]);

edited Feb 10, 2017 at 14:07

Rayann Nayran

1,1331 gold badge7 silver badges15 bronze badges

answered Sep 18, 2013 at 18:43

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

5 Comments

Louie Almeda Over a year ago

It might work, but It should not be done in a controller

Sjoerd de Wit Over a year ago

Should be done in the config phase, but it also needs to be done after a login so it's possible that you could set this in a logincontroller

Jackson Over a year ago

Makes perfect sense for my case. If you are fetching data from different API's you want to configure it on particular part not for the whole web app. +1

david.carm Over a year ago

@LouieAlmeda I think you are right. It shouldn't be done in a controller. But Sjoerd has a point too. You should be able to set it on login. That's why I put this stuff and other $http calls in factories. I think that separates the logic from what should happen in the controller from practical stuff like this.

Louie Almeda Over a year ago

@david.carm then set it on your login service, called from a controller. Unless you don't have that service and doing everything in the controller

MrZime · Accepted Answer · 2016-05-24 09:23:17Z

6

In the angularjs documentation you can see some ways to set headers but I think this is what you are searching:

$http({
    method: 'POST',
    url: '/theUrl',
    headers: {
        'Authorization': 'Bearer ' + 'token'
         //or
         //'Authorization': 'Basic ' + 'token'
    },
    data: someData
}).then(function successCallback(response) {
    $log.log("OK")
}, function errorCallback(response) {
    if(response.status = 401){ // If you have set 401
        $log.log("ohohoh")
    }
});

I'm using this structure in my angularjs client with an ASP.NET 5 server and it works.

edited May 24, 2016 at 9:23

answered Apr 20, 2016 at 18:40

MrZime

671 silver badge4 bronze badges

1 Comment

tier1 Over a year ago

There is no reason to add JQuery to an Angular project just for Ajax auth headers.

D.Evangelista · Accepted Answer · 2013-09-18 18:35:56Z

4

In the $http doc you can see that you should set the default headers using $httpProvider:

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common['Authorization'] = 'Basic auth';
}]);

answered Sep 18, 2013 at 18:35

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

Comments

Dung · Accepted Answer · 2018-03-02 21:23:08Z

WORKING EXAMPLE: I have learnt this from @MrZime - Thanks! and Read https://docs.angularjs.org/api/ng/service/$http#setting-http-headers

Latest v1.6.x of NGULARJS as of 2018 MARCH 2nd

        var req = {
            method: 'POST',
            url: 'https://api.losant.com/applications/43fdsf5dfa5fcfe832ree/data/last-value-query',
            headers: {
                'Authorization': 'Bearer ' + 'adsadsdsdYXBpVG9rZW4iLCJzrdfiaWF0IjoxNdfsereOiJZ2V0c3RfdLmlvInfdfeweweFQI-dfdffwewdf34ee0',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            data: {
                "deviceIds": [
                    "a6fdgdfd5dfqaadsdd5",
                    "azcxd7d0ghghghghd832"
                ],
                "attribute": "humidity"
            }
        }




        $http(req).then(function successCallback(response) {

            $log.log("OK!")
             returnedData = response.data

        }, function errorCallback(response) {

            if (response.status = 401) { // If you have set 401

                $log.log("BAD 401")

            }
            else {

                $log.log("broken at last")

            }
        });

Add it to your.js file and include this your.js in your.html file and look at console panel in debug/F12 on chrome you should get OK status and "returnedData" is what you want in the end. Enjoy the data!

Lukasz Korzeniowski · Accepted Answer · 2016-12-07 14:48:40Z

1

Try base64 encoding your user:password before you append it to "Basic", as in:

headers: {
  'Authorization': "Basic " + auth64EncodedUserColonPass
}

answered Dec 7, 2016 at 14:48

Lukasz Korzeniowski

4113 silver badges6 bronze badges

Comments

Dharman · Accepted Answer · 2019-08-13 11:42:34Z

1

add below line in your aap.run method

$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';

edited Aug 13, 2019 at 11:42

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 13, 2019 at 11:39

SaiSudha HG

211 bronze badge

Collectives™ on Stack Overflow

$http Auth Headers in AngularJS

8 Answers 8

7 Comments

Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related