Question

我是角度js的新手。我使用角度js和离子框架制作离子应用程序， 这是我的service.js文件。

在此我已经为Login控件创建了LoginService。但它不起作用。

angular.module('starter.services', ['ngCookies'])

.service('LoginService', function ($q, $http, $cookies, $rootScope) {
    return {
        loginUser: function (name, pw) {
            var deferred = $q.defer();
            var promise = deferred.promise;
            var user_data = $http.get("http://vanhalterenwatersport.nl/van/webservice/appc/login.php");
            user_data.then(function (result) {
                var user = result.data;
                log(user);
                console.log($rootScope.session);
            })
            function log(user) {
                var i;
                var isloggedin = false;
                for (i = 0; i < user.length; i++) {
                    if (name == user[i].user_email && pw == user[i].password) {
                        isloggedin = true;
                        id = user[i].iduser;
                        $rootScope.session = id;
                        break;
                    } 
                }
                if (isloggedin) {
                    deferred.resolve('Welcome ' + name + '!');
                } else {
                    deferred.reject('Wrong credentials.');
                }
            }
            promise.success = function (fn) {
                promise.then(fn);
                return promise;
            }
            promise.error = function (fn) {
                promise.then(null, fn);
                return promise;
            }
            return promise;
        }
    }
})

这是我的controllers.js文件

 angular.module('starter.controllers', ['ngRoute','ngCookies'])

    .controller('AppCtrl', function($scope, $ionicModal, $timeout) {

      // With the new view caching in Ionic, Controllers are only called
      // when they are recreated or on app start, instead of every page change.
      // To listen for when this page is active (for example, to refresh data),
      // listen for the $ionicView.enter event:
      //$scope.$on('$ionicView.enter', function(e) {
      //});

    })

    .controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state, $cookies, $rootScope) {
        $scope.data = {};

        $scope.create = function () {
            $state.go('signup');
        }

        $scope.forgot = function () {
            $state.go('forgotpassword');
        }

        $scope.login = function () {
            console.log($scope.data.user_email);
            LoginService.loginUser($scope.data.user_email, $scope.data.password).success(function (data) {
                var wat = $rootScope.session;
                console.log(wat);
                $state.go('app.dashboard');
            }).error(function (data) {
                var alertPopup = $ionicPopup.alert({
                    title: 'Login failed!',
                    template: 'Please check your credentials!'
                });
            });
        }

    })

这是我的login.html

<ion-view view-title="Login" hide-nav-bar="true" name="login-view">

  <ion-content ng-controller="LoginCtrl">
  <div class="bar-header padding">
  <h1 class="title vanimage"><img src='img/logo.png'></h1>
</div>


      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" name="username" ng-model="data.user_email">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" name="password" ng-model="data.password">
        </label>
        <label class="item">
           <button class="button button-block button-positive"  ng-click="login()">Log in</button>
        </label>
      </div>



    <div class="padding">

    <button class="button button-block  button-positive" ng-click="create()">Registeer hier</button>

     <button class="button button-block button-positive" ng-click="forgot()">Password Vergeten?</button>
     </div>



  </ion-content>
</ion-view>

Answer 1

你应该将auth逻辑放在后端，更加安全和有效。

这是我用于在Ionic应用程序服务中登录的代码：

login: function( loginEmail, loginPassword ) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: backend_url + '/auth',
        // --- change content-type if needed (default = application/json)
        // headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: { email: loginEmail, password: loginPassword }
    }).then( function( result ) {
        if( typeof result.data.token !== 'undefined' ) deferred.resolve( { token: result.data.token } );
        else deferred.reject( { error: 'invalid_response' } );
    }, function( result ) {
        if( typeof result.data.error !== 'undefined' ) deferred.reject( { error: result.data.error, status: result.status } );
        else deferred.reject( { error: 'invalid_login' } );
    });
    return deferred.promise;
},

Answer 2

$ http总是返回一个promice，所以如果你想在你的服务中正确地做到这一点，使用$ q试试这样的smth：

var fn = function (method, url) {
    var deferred = $q.defer();
     $http(method, url)
       .success(function (data) {
            deferred.resolve(data);
         }
         .error(function (data, status) {
              deferred.reject({
                   data: data,
                   status: status
                 });
           });
            return deferred.promise;
}

如果你想调用这个函数你应该做

fn(method, url)
 .then(
    function(result){
    ... do if ok (resolve)
    },
    function( error) {
    ... do if error (reject) 
     }
)

Answer 3

您忘记在服务中返回deferred对象了.. 这可能会导致以下错误：

无法读取未定义的属性

我已经做了一个基本的例子来演示$ q服务：

控制器 - 登录功能

$scope.login = function login() {

LoginService.loginuser($scope.data.user_email, $scope.data.password)
    .then(function onLoginSuccess(response) {
        // response should contain 'success' data
        $state.go('app.dashboard');
    }, function onLoginFailed(error) {
        var alertPopup = $ionicPopup.aler({
            title: 'Login failed!',
            template: 'Please check your credentials!'
        });
    });
}

<强>服务

var API = {};

function loginUser(email, password) {

    var deferred = $q.defer();

    $http.get("http://vanhalterenwatersport.nl/van/webservice/appc/login.php")
        .then(function onUserLoggedIn(response) {
            deferred.resolve(response);
        }, function onLoginFailed(error) {
            deffered.reject(error);
        });

        // Make sure to return your promise!
        return deferred.promise;
}

API.loginUser = loginUser;

旁注：您还在登录功能中使用 GET 。对于这种类型的操作，您通常会 POST 一个数据对象到您的后端，而后端将返回结果。

如何在角度js中使用$ q服务进行登录？

3 个答案: