event.preventDefault() 不等到承诺解决

Question

我正在使用 event.preventDefault() 技术根据我从后端获取的标志值有条件地将用户重定向到适当的状态。 Eveything 似乎工作正常，除了有时会呈现实际页面然后发生重定向，而且在极少数情况下也是如此。实际页面的这种渲染时间也很短。以下是我正在使用的代码 sn-p：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){

  if (fromState.name === '' && toState.name === "myState"){

    Auth.isLoggedInAsync(function(loggedIn) {
      if (!loggedIn) {
        event.preventDefault();
        $state.go('state1');
      } else {
          event.preventDefault();
          Auth.getNextStateForUser()
          .then(function(data) {
            console.log(data.nextState);
            $state.go(data.nextState);
          })
          .catch(function(err){
              console.log(err);
              $state.go(toState.name);
          });
      }
    });

我遵循的逻辑是，检查用户是否登录，然后重定向到 state1，否则根据从后端获取的 nextstateValue 重定向到下一个适当的状态。如果出现错误，直接打开实际页面，不做任何重定向。

我希望我清楚自己在做什么。只是想知道我所面临的问题是真正的问题还是我在做错了什么。

我也将它发布在 github 页面上，但似乎我是唯一一个面临这个问题的人。

请检查此以获取更多信息： https://github.com/angular-ui/ui-router/issues/2088

谢谢

编辑：根据答案，我更新了使用 ui-router 解析的代码并将我的 isLoggedInAsyc 转换为返回承诺。

resolve: {

  promiseState: function(Auth, $state, $q, $stateParams) {

    var deferred = $q.defer();

    Auth.isLoggedInSync()
    .then(function(isLoggedIn){
        console.log(isLoggedIn);
        if(isLoggedIn) {
          Auth.getNextStateForUser()
              .then(function(data) {
                console.log(data.nextState);
                $state.go(data.nextState);
                deferred.resolve(data);
               })
              .catch(function(error) {
                console.log(error);
                deferred.reject(error);
          }); 
        }

        deferred.resolve(isLoggedIn);
    })
    .catch(function(err){
        console.log(err);
        deferred.reject(err);
    });

    return deferred.promise;
  }
}

我的 isLoggedIn() 返回承诺。

  isLoggedInSync: function(callback) {
    var cb = callback || angular.noop;
    var deferred = $q.defer();
    if(currentUser.hasOwnProperty('$promise')) {
      currentUser.$promise.then(function() {
        deferred.resolve(true);
        return cb(true);
      }).catch(function() {
        deferred.resolve(false);
        return cb(false);
      });
    } else if(currentUser.hasOwnProperty('role')) {
      deferred.resolve(true);
    } else {
      deferred.resolve(false);
    }
    return deferred.promise;
  }

Answer 1

正如@milaenlempera 所提到的，所有 Angular 事件都是同步的，在这种情况下，您没有真正的方法可以很好地处理异步。我们在生产代码中遇到了这个问题，我们的解决方案是在 ui-router 中使用 resolve 功能。这就是我们解决它的方法（显然插入到您的代码中）

.state({
  name: 'myState',
  resolve: {
    principal: ['Auth', '$state', '$q', function(Auth, $state, $q) {
      var deferred = $q.defer();
      Auth.isLoggedInAsync(function(loggedIn) {
        if(!isLoggedIn) {
          deferred.resolve($state.go('state1'));
          return;
        }
        return Auth.getNextStateForUser()
          .then(function(data) {
            $state.go(data.nextState);
           })
          .catch(function(error) {
            deferred.reject(error);
          });
      });
      return deferred.promise;
    }]
  }
});

我建议转Auth.isLoggedInAsync 以返回承诺。

另外，如果Auth.getNextStateForUser() 被拒绝，您的原始代码将导致无限循环。它将尝试转到名称为toState.name 的状态，也就是刚刚导致错误的状态，这将导致另一个错误并导致它转到toState.name....

因为resolve 级联，如果你想共享权限规则，你可以实现子状态。没有办法只在状态上放置一个属性并在其他地方处理异步权限检查，这确实很糟糕，但这就是我们目前所处理的。

根据 cmets，这是一个使用修改后的代码链接承诺的示例。

  promiseState: ['Auth', '$state', function(Auth, $state) {
    return Auth.isLoggedInSync()
      .then(function(isLoggedIn) {
        if(isLoggedIn) {
          return Auth.getNextStateForUser().then(function(data) {
            return data.nextState;
          });
        }
        // If the user isn't logged in, return the state that you should go to instead
        return 'state1';
      })
      .then(function(nextState) {
        return $state.go(nextState);
      });
  }]

Answer 2

Angular 事件是同步的。 如果需要停止它，则必须在事件处理函数中同步执行。 在您的示例中是异步检查登录，同时路由继续。这就是您看到页面并在之后发生重定向的原因。

$rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams){

      // here check if route can be display (synchronously)
      // or event.preventDefault()

      Auth.isLoggedInAsync(function(loggedIn) {
      if (loggedIn) {
        // continue to original route or go to state by server data
      } else {
        // redirect to login page
      }  
});

你可以从我的解决方案中得到启发here