How to handle http 302 response in angularjs

Question

I have a java filter, that checks session attribute username. When the username is null then redirect to path /login.I access path /index.html when username is null, I got a HTTP code 302, so I add interceptor in angularjs. But I access /index.html got a error when username is null.

var testApp = angular.module('testApp', [ 'ngRoute', 'myApp' ]);

testApp.config([ '$routeProvider', function($routeProvider) {
	$routeProvider.when('/anchor/historyAttendance/:uid',{
        templateUrl : 'anchor/historyAttendance.html',
        controller : 'AnchorHistoryAttendanceCtrl'
    }).when('/anchor/list', {
        templateUrl : 'anchor/list.html',
        controller : 'AnchorListCtrl'
    }).otherwise({
		redirectTo : '/'
	});
} ]);

var app = angular.module('myApp', [ 'ngTable', 'ngFileUpload', 'ngDialog' ,'ui.colorpicker', 'ngCsv', 'ngSanitize'],function ($provide,$httpProvider) {
    // register the interceptor as a service
    $provide.factory('myHttpInterceptor', function($q) {
        return {
            // optional method
            'request': function(config) {
                // do something on success
                console.log(config);
                return config;
            },
            // optional method
            'requestError': function(rejection) {
                // do something on error
                console.log(rejection);
                return $q.reject(rejection);
            },
            // optional method
            'response': function(response) {
                // do something on success
                console.log(response);
                return response;
            },
            // optional method
            'responseError': function(rejection) {
                // do something on error
                console.log(rejection);
                return $q.reject(rejection);
            }
        };
    });

    $httpProvider.interceptors.push('myHttpInterceptor');
});

app.directive('fontColor', function () {
    return {
        restrict: 'E',
        scope: {},
        replace: false,
        template: '<div color-picker default-color="#ff0000" class="font-color" ng-style="{\'background-color\': selectedFontColor}"></div>',
        link: function (scope) {
            scope.selectedFontColor = '#f00';
            scope.$on('colorPicked', function (event, color) {
                scope.selectedFontColor = color;
            });
        }
    }
});

the error in chrome like that:

Answer 1

You can not handle 302 response from a server because browsers do this before the Angular is notified. In a way, Angular response interceptor will never get a hand on this response.

It is properly explained here: Handle HTTP 302 response from proxy in angularjs or https://stackoverflow.com/a/29620184/2405040

Answer 2

It seems that you have created myApp after creation of testApp while you have injected myApp with testApp which does not look correct.

Make sure before injecting any of the module it should be available.

Try below code:

var app = angular.module('myApp', [ 'ngTable', 'ngFileUpload', 'ngDialog' ,'ui.colorpicker', 'ngCsv', 'ngSanitize'],function ($provide,$httpProvider) {
    // register the interceptor as a service
    $provide.factory('myHttpInterceptor', function($q) {
        return {
            // optional method
            'request': function(config) {
                // do something on success
                console.log(config);
                return config;
            },
            // optional method
            'requestError': function(rejection) {
                // do something on error
                console.log(rejection);
                return $q.reject(rejection);
            },
            // optional method
            'response': function(response) {
                // do something on success
                console.log(response);
                return response;
            },
            // optional method
            'responseError': function(rejection) {
                // do something on error
                console.log(rejection);
                return $q.reject(rejection);
            }
        };
    });

    $httpProvider.interceptors.push('myHttpInterceptor');
});

app.directive('fontColor', function () {
    return {
        restrict: 'E',
        scope: {},
        replace: false,
        template: '<div color-picker default-color="#ff0000" class="font-color" ng-style="{\'background-color\': selectedFontColor}"></div>',
        link: function (scope) {
            scope.selectedFontColor = '#f00';
            scope.$on('colorPicked', function (event, color) {
                scope.selectedFontColor = color;
            });
        }
    }
});


var testApp = angular.module('testApp', [ 'ngRoute', 'myApp' ]);

testApp.config([ '$routeProvider', function($routeProvider) {
    $routeProvider.when('/anchor/historyAttendance/:uid',{
        templateUrl : 'anchor/historyAttendance.html',
        controller : 'AnchorHistoryAttendanceCtrl'
    }).when('/anchor/list', {
        templateUrl : 'anchor/list.html',
        controller : 'AnchorListCtrl'
    }).otherwise({
        redirectTo : '/'
    });
} ]);