2015-09-27 180 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); 
     } 
     }; 
     }]); 
}]);