通过http进行角度登录

Question

作为Angular的新手，我正尝试使用Ionic为我的移动应用程序构建登录方法。

这里是我的登录视图：

<ion-view view-title="Sign-In" name="login-view"> 
    <ion-content class="padding"> 
     <div class="list list-inset"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Username" ng-model="data.username"> 
      </label> 
      <label class="item item-input"> 
       <input type="password" placeholder="Password" ng-model="data.password"> 
      </label> 
     </div> 
     <button class="button button-block button-positive" ng-click="login(data)">Login</button> 
    </ion-content> 
</ion-view> 

，这里是services.js内我的javascript使用$ HTTP登录 -

angular.module('APP').service('AuthService', function ($q, $http, URLS) { 
    var login = function (name, pw) { 
     return $q(function (resolve, reject) { 
      name = 'demoperson'; 
      pw = 'Abc'; 

      var dataObj = { 
       grant_type: 'password', 
       username: name, 
       password: pw 
      }; 
      var res = $http.post(URLS.LOGINURL, dataObj) 
      .success(function (data, status, headers, config) { 
       $scope.message = data; 
       resolve('Login success.'); 
      }) 
      .error(function (data, status, headers, config) { 
       alert("failure message: " + JSON.stringify({ data: data })); 

       reject('Login Failed.'); 
      }); 
     }); 
    }; 
}); 

问题是每一个请求不打时间服务器和我最终在错误回调没有任何错误。我无法看到发生了什么错误，Fiddler也没有捕获到错误。

有什么明显的缺失？

Answer 1

希望您的AuthService将不仅仅是一个登录方法了。尝试采取这种方法：

angular.module('APP') 
    .factory('AuthService', function ($q, $http, URLS) { 
     var Auth = { 
      login: function (name, pw) { 
      var dfd = $q.defer(); 
      var dataObj = { 
       grant_type: 'password', 
       username: name, 
       password: pw 
      }; 
      $http.post(URLS.LOGINURL, dataObj) 
        .then(function (res) { 
         var handled = 'handle response here'; 
         dfd.resolve(handled); 
        }, function (err) { 
         dfd.reject({error: err}); 
        }); 
      return dfd.promise; 
      }, 
      logout: logoutMethod 
     }; 
     return Auth; 
    }; 
}); 

Answer 2

您不需要使用$ q。 $ http已经有内置的承诺。

$http({ 
     method: "get", 
     url: "/something", 
     data: {...} 
    }).success(function (data, status, headers, config) { 
     ... 
    }).error(function (data, status, headers, config) { 
     ... 
    }); 

此外，没有你的控制器已经在$scope的方法称为login？从你的例子中可以看出，ng-click="login(data)"将会调用你的var login = function (name, pw)函数。此外，登录呼叫传递1个参数，您的服务登录需要两个参数。那里发生了什么？

Answer 3

这应该是一个工厂服务：

angular.module('APP').factory('AuthService', function ($q, $http, URLS) { 
    var login = function (name, pw) { 
     return $q(function (resolve, reject) { 
      name = 'demoperson'; 
      pw = 'Abc'; 

      var dataObj = { 
       grant_type: 'password', 
       username: name, 
       password: pw 
      }; 
      var res = $http.post(URLS.LOGINURL, dataObj) 
      .success(function (data, status, headers, config) { 
       //$scope.message = data; 
       //this should be done from the returned promise. 
       resolve(data); 
      }) 
      .error(function (data, status, headers, config) { 
       alert("failure message: " + JSON.stringify({ data: data })); 

       reject('Login Failed.'); 
      }); 
     }); 
    }; 
    return login; 
}); 

当然，你需要依赖连接到$scope所以你可以做到这login()从形式。或者有一个控制器方法来代替。

此外，你可能想：

var login = function (obj) { 
    obj.username = obj.username || 'demoperson'; 
    obj.password = obj.password || 'Abc'; 

    var dataObj = { 
      grant_type: 'password', 
      username: obj.username, 
      password: obj.password 
     }; 

鉴于您在表格上传递函数的对象。控制器的

例子：

angular.module('APP').controller('myController', ['$scope', 'AuthService', function($scope, login){ 
    $scope.login = function(data){ 
     login(data).then(function(message){ 
      $scope.message = message; 
     }); 
    }; 
});