javascript - 为什么 event.preventDefault() 无法取消 Angular js 中的 $routeChangeStart 事件

Question

我已经在 Angular JS 应用程序中完成了路由限制。当用户已经登录时，它不应移动到登录页面。这是我的代码:

.run(function($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function(event, next) {

       Auth.isLoggedInAsync(function(loggedIn) {

        if(loggedIn){ //when user loged in it should not move to login page
          if ($location.path() == "/participant/login"){
            event.preventDefault();
          }
        }
      });
    });

这段代码不会给出任何类型的错误。但是当用户已经登录时它会移动到登录页面。我认为这里 event.preventDefault() 不起作用。如果我犯了任何错误或者如果你有什么好的办法来处理这个问题吗？

Answer 1

我认为 @wiherek 的答案一般不会起作用，因为它没有提供任何方法来保证 Auth 服务在 $routeChangeStart 处理程序被调用。

不过，您可以信赖的是，如果路由的 resolve 参数中的任何项目返回 Promise，那么:

• promise 将在路线更改发生之前得到解决，或者
• promise 将在 $rootScope.$routeChangeStart 广播之前被拒绝。

因此，在您的路线定义中，您可以这样:

$routeProvider.when('/participant/login', {
  resolve: {
    auth: function(Auth, $q) {
      var deferred = $q.defer();
      Auth.isLoggedInAsync(function(loggedIn) {
        if (loggedIn) {
          deferred.resolve();
        }
        else {
          deferred.reject({alreadyLoggedIn: true});
        }
      }).catch(function() {
        deferred.reject();
      });
      return deferred.promise;
    }
  }
);

你可以通过监听$routeChangeError来捕获它:

app.run(function($rootScope, $location, Auth) {
  $rootScope.$on("$routeChangeError", function(event, current, previous, rejection) {
    if (rejection != null && rejection.alreadyLoggedIn) {
      // We should get here if and only if
      // `deferred.reject({alreadyLoggedIn: true})` was called from the
      // above.
    }
  });
});