Question

我是棱角分明的新手，我很难找到问题的根源。

我正在编写单页应用程序，正在处理身份验证部分。我有一个名为“sessionService”的服务，我希望能够在整个应用程序中使用该服务来确定用户是否已登录。如果我做这样的事情很简单：

...service('sessionService', function(...) { 
    /*...snip...*/
    this.isLoggedIn = function() { 
        return this.authenticated;
     };
});

“经过身份验证”的地方仅对服务是私有的。但是，如果我刷新页面，则会崩溃。所以，我的想法是做这样的事情：

/*...snip...*/
this.isLoggedIn = function() { 
  var deferred = $q.defer()
    , self     = this
    ;

  function handleLoggedInStatus(status) {
    if (status) {
      self.authenticated = true;
      deferred.resolve();
    }
    else {
      deferred.reject();
    }
  }

  if (this.authenticated === null) {
    $http.get('/user')
      .success(function(response) {
        handleLoggedInStatus(response.success);
      });
  }
  else {
    handleLoggedInStatus(this.authenticated);
  }

  return deferred.promise;
};

然后在我的控制器中我会做这样的事情：

$scope.isLoggedIn = sessionService.isLoggedIn;

在我的模板中我会这样做：

...data-ng-show="isLoggedIn()"

但是，这样做会导致以下错误：

10 $digest() iterations reached. Aborting!

我尝试了几种不同的方法来引用sessionService.isLoggedIn函数，例如：

$scope.isLoggedIn = sessionService.isLoggedIn();
$scope.isLoggedIn = sessionService.isLoggedIn.bind(sessionService)();
$scope.isLoggedIn = function() { return sessionService.isLoggedIn() }

但是他们要么不起作用，要么只是给了我同样的错误。

基本上，我只是希望能够返回一个承诺，告诉我用户是否已登录。如果我们不知道他们是否已登录（如页面刷新后），承诺将在ajax请求后解决。如果我们已经知道（就像整个单页应用程序中的正常导航一样）那么承诺将立即得到解决。然后我想在我的视图中使用它，以便显示/隐藏某些内容，例如注销链接或查看帐户页面。

我做错了什么？

Answer 1

你正在解决你的承诺，但没有价值 - 所以解决后$scope上承诺的价值是undefined，这是假的，因此你的ng-show没有触发。

看来你正在寻找更像这样的东西：

在服务中：

function handleLoggedInStatus(status) {
  if (status) {
    self.authenticated = true;
  }
  deferred.resolve(status); // always resolve, even if with falsy value
}

if (this.authenticated === null) {
  $http.get('/user')
    .success(function(response) {
      handleLoggedInStatus(response.success);
    })
    .error(function(data) {
      deferred.reject(data.errorMsg); // reject if there was an error
    });
} else {
  handleLoggedInStatus(this.authenticated);
}

在控制器中：

$scope.loggedIn = sessionService.isLoggedIn();

在HTML中：

<div ng-show='loggedIn'>...</div>

Here is a JSFiddle演示使用真实值解析延迟并绑定到$scope。

请注意，您无法将函数本身绑定到范围

$scope.loggedIn = sessionService.isLoggedIn

并在视图中调用该函数

<div ng-show="loggedIn()">...</div>

因为该函数返回不同的承诺每个摘要周期（这就是为什么你得到'10摘要周期'错误）。但是，您可以确保对sessionService.isLoggedIn的额外调用返回相同的承诺而不是创建新的承诺，因为您可以多次调用then承诺（并且在事实上，这是承诺的好处之一）：

deferred = null;

isLoggedIn: function() {
  if (!deferred) {
    deferred = $q.defer();
    $http.get('/user')
      .success(function(response) {
        deferred.resolve(response.success); // resolve if true or false
      })
      .error(function(data) {
        deferred.reject(data.errorMsg); // reject if there was an error
      });
  }
  return deferred.promise;
}

然后你可以摆脱this.authenticated布尔值，因为你不需要在函数调用中跟踪以前登录的用户（因为promise会为你做这件事）。

然而，虽然这消除了摘要周期错误，但你仍然无法从视图中调用函数 - 我怀疑Angular将返回值（promise本身）视为一个真值，而不是绑定到promise的解决了价值。 Here's an example of it not working;请注意，即使承诺通过div解析，也会显示false。

要使用deferred.reject表示用户未经过身份验证，就像在原始服务中一样，您希望在控制器中执行更多类似的操作，但我相信{ {1}} resolve更清晰：

false

Angular - 绑定到返回promise的函数

1 个答案: