How to read response headers in angularjs applicaiton on FIRST TIME load(NOT USING $http or $resource)?

Question

I have a angularjs application which is deployed on app server and we have a single sign on web server which on successful authentication redirects to our application with the username in the response headers.

I have to read the username from the response headers when the angularjs application loads and use it to show on my application.

What i have tried:

1. Used as below in my app.js :

   angular .module('myApp', [ 'ngResource', 'ngRoute', 'cgBusy', 'ui.bootstrap', 'ui.grid', 'ui.grid.pagination', 'ui.grid.moveColumns', 'ui.grid.selection', 'ui.grid.exporter', 'ngMaterial', 'angular-dropdown-multiselect' ]) .run(["$rootScope", function ($rootScope){

       var checkIfAuthenticated = function (next) {
         console.log('Inside checkIfAuthenticated ---> ' + next);
         var matchedData = next.match( /[\?\&]username=([^\&]+)/);
         console.log('Inside checkIfAuthenticated matchedData ---> ' + matchedData);
   
               var proxyUserMatch = next.match( /[\?\&]username=([^\&]+)/);
         console.log('Inside checkIfAuthenticated proxyUserMatch ---> ' + proxyUserMatch)
   
       };
       var firstTimeRoute = $rootScope.$on("$locationChangeStart", function(event, next, current) {
   
           console.log( "route change (first time)->current=[" + current + "], next=[" + next + "]");
   
           checkIfAuthenticated( next);
   
           firstTimeRoute(); // opt out of the event
       });
   }]);
   

Answer 1

You can't access the HTTP header without a request.

If you have a Single-Sign on server the needed headers are probably in every request so you could send a request to the server to get the header.

If you want to send a request before angular you need to bootstrap angular manuall. For that you can just use this snippet:

//init angular app
var app = angular.module("app", []);
//inject the injector from angular
var initInjector = angular.injector(["ng"]);
//inject the $http service
var $http = initInjector.get("$http");

//use the $http service
$http.get("/Some/path")
    .then(function(response) {
        //check if we got a valid response
        if(response != undefined){
            //get all header
            var headers = response.headers();
            //bootstrap the application if the document is ready
            angular.element(document).ready(function() {
                angular.bootstrap(document, ["app"]);
            });
        }
    };

With this you got all headers inside the variable "headers".

You can use Jquery or plain javascript, too.