401（未经授权）Get 方法错误

Question

我正在使用 HTTP Auth Interceptor Module 创建一个简单的登录应用程序。

在我的 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;
}])

这是我的登录页面：

当我尝试在浏览器中对此进行测试时，我没有成功登录，甚至没有收到错误消息，而是收到了这个弹出窗口：

我不明白为什么不考虑从登录表单传递的凭据。我怎样才能摆脱这个弹出窗口。当我取消此弹出窗口时，我再次在控制台中收到 401（未经授权）错误，而不是收到 http 请求的错误。我错过了什么？

我也在 Emulator 中运行，应用程序没有出现任何错误，而是停留在加载部分。

Answer 1

1- 将您的 URL 更改为

.get('https://username:password@Foo.com/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)
    }
  }
}])

}])

Answer 2

这是工作代码片段。只需从此处复制粘贴即可。

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

401（未经授权）Get 方法错误

401 (Unauthorized) Error on Get method

authentication

basic-authentication

angularjs

cordova

ionic