如何在angularjs

时间:2016-05-23 09:24:46

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

我有一个java过滤器,用于检查会话属性用户名。当用户名为null然后重定向到路径/login.I访问路径/index.html当username为null时,我得到了一个HTTP代码302,所以我在angularjs中添加了拦截器。但是当username为null时,我访问/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中的错误如下:enter image description here

2 个答案:

答案 0 :(得分:1)

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

此处已正确解释:Handle HTTP 302 response from proxy in angularjshttps://stackoverflow.com/a/29620184/2405040

答案 1 :(得分:0)

您在创建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 : '/'
    });
} ]);