2015-09-27 122 views
2

我正在使用HTTP Auth Interceptor Module创建一个简单的登录应用程序。401(未授权)获取方法出错

在我的LoginController

我:

angular.module('Authentication') 
.controller('LoginController', 
['$scope', '$rootScope', '$location', 'AuthenticationService', 
function ($scope, $rootScope, $location, AuthenticationService) { 
    // reset login status 
    AuthenticationService.ClearCredentials(); 

    $scope.login = function() { 
     $scope.dataLoading = true; 
     AuthenticationService.Login($scope.username, $scope.password, function (response) { 
      if (response.success) { 
       AuthenticationService.SetCredentials($scope.username, $scope.password); 
       $location.path('/'); 
      } else { 
       $scope.error = response.message; 
       $scope.dataLoading = false; 
      } 
     }); 

    }; 
}]); 

和下面是它的简单的服务:

angular.module('Authentication') 

.factory('AuthenticationService', 
['Base64', '$http', '$cookieStore', '$rootScope', '$timeout', 
function (Base64, $http, $cookieStore, $rootScope, $timeout, $scope) { 
    var service = {}; 

    service.Login = function ($scope, username, password, callback) { 

     $http 
      .get('http://Foo.com/api/Login', 
         { username: username, password: password } , {withCredentials: true}). 
         then(function (response) { 
           console.log('logged in successfully'); 
           callback(response); 
         }, function (error) { 
           console.log('Username or password is incorrect'); 
         }); 
    }; 

    service.SetCredentials = function (username, password) { 
     var authdata = Base64.encode(username + ':' + password); 

     $rootScope.globals = { 
      currentUser: { 
       username: username, 
       authdata: authdata 
      } 
     }; 

     $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; 
     $http.defaults.headers.common['Content-Type'] = 'application/json' 
     $cookieStore.put('globals', $rootScope.globals); 
    }; 

    service.ClearCredentials = function() { 
     $rootScope.globals = {}; 
     $cookieStore.remove('globals'); 
     $http.defaults.headers.common.Authorization = 'Basic '; 
    }; 

    return service; 
}]) 

这是我的登录页面: enter image description here

我尝试测试这在浏览器中,而不是成功的登录,甚至收到错误,我得到这个弹出: enter image description here

我没有得到的是为什么从登录表单传递的凭据没有考虑到。我怎样才能摆脱这个弹出窗口。 因为我取消这个弹出窗口,而不是获取http请求的错误,在控制台我得到401(未授权)错误。 我错过了什么?

我也在模拟器中运行,而不是得到任何错误,应用程序停留在加载部分。

+1

看起来您的服务器正在发送'WWW-Authenticate:Basic'标头,所以浏览器显示凭证提示。所有这些都发生在比JS级低的水平。 –

+0

但不应该是我在app @NewDev中阻止这种方式的一种方式? – Afflatus

回答

2

1-更改您的网址类似

.get('https://username:[email protected]/api/Login',... 

2 - 使用下面的示例来处理401错误:

.config(['$httpProvider', function($httpProvider) { 
$httpProvider.defaults.useXDomain = true; 
$httpProvider.defaults.withCredentials = true; 
$httpProvider.interceptors.push(['$q', function ($q) { 
    return { 
    'responseError': function (rejection) { 
     if (rejection.status === 401) { 
     console.log('Got a 401'); 
     } 
     return $q.reject(rejection) 
    } 
    } 
}]) 

}])

0

这里是工作的代码段。只需从这里复制粘贴。

routerApp.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.useXDomain = true; 
    $httpProvider.defaults.withCredentials = true; 
    $httpProvider.interceptors.push(['$q', function ($q) { 
     return { 
     'responseError': function (rejection) { 
      if (rejection.status === 401) { 
      window.console.log('Got a 401'); 
      } 
      return $q.reject(rejection); 
     } 
     }; 
     }]); 
}]);