如何在angularjs中处理http 302响应答案

【问题标题】：How to handle http 302 response in angularjs如何在angularjs中处理http 302响应
【发布时间】：2016-09-20 02:43:03
【问题描述】：

我有一个 java 过滤器，它检查会话属性用户名。当用户名为空时重定向到路径/login。当用户名为空时我访问路径/index.html，我得到一个HTTP代码302，所以我在angularjs中添加了拦截器。但是当用户名为空时，我访问 /index.html 时出错。

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;
            });
        }
    }
});

像这样的chrome错误：

【问题讨论】：

标签： javascript angularjs http-status-code-302

【解决方案1】：

您无法处理来自服务器的 302 响应，因为浏览器会在 Angular 收到通知之前执行此操作。在某种程度上，Angular 响应拦截器永远不会处理这个响应。

这里正确解释：Handle HTTP 302 response from proxy in angularjs 或https://stackoverflow.com/a/29620184/2405040

【讨论】：

【解决方案2】：

您似乎在创建 testApp 之后创建了 myApp，而您向 myApp 注入了看起来不正确的 testApp。

在注入任何模块之前确保它应该可用。

试试下面的代码：

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

【讨论】：

我交换了 testApp 和 myApp 代码顺序，但仍然收到类似“无法实例化模块 testApp”的错误
您能否在此处附加完整的错误堆栈跟踪。这将有助于找到错误的确切原因。一件事是确定应用错误在尝试后现在必须消失。
所有错误堆栈跟踪都发布在问题图片中。tinytimesApp 是 testApp。