通過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; 
     }); 
    }; 
});