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:

score 1 · Answer 1 · edited May 23 '17 at 12:33

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

edited May 23 '17 at 12:33

Community

1
1

answered May 23 '16 at 09:51

Shashank Agrawal

25,161
11
89
121

score 0 · Answer 2 · answered May 23 '16 at 09:39

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 : '/'
    });
} ]);

I had exchange testApp and myApp code order ,but still got a error like that "Failed to instantiate module testApp" — Ryanqy, May 23 '16 at 09:46
can you attach full error stack trace here. It will be helpful to reach to the exact cause of error. One thing is sure that app error must be gone now after tried it. — Suneet Bansal, May 23 '16 at 09:48
All error stack trace are posted in question picture.tinytimesApp is testApp. — Ryanqy, May 23 '16 at 09:55

How to handle http 302 response in angularjs

2 Answers2

Try below code: