在 ajax 完成之前 Angular UI-router 强制重定向

Question

我正在寻找基于身份验证的重定向。如果用户试图点击/dashboard，它想在尝试切换到该路由之前检查他们是否先登录。如果他们没有通过身份验证，他们会转到/login。假设我有一个服务来检查他们是否已登录（通过 ajax），这就是我目前拥有的：

var app = angular.module('someApp', [
  'ui.router'
]);

app.config([
  '$stateProvider', '$urlRouterProvider', '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider)
  {
    $locationProvider.html5Mode(true);

    $stateProvider.state('dashboard', {
      url: '/dashboard/:collectionId',
      templateUrl: 'partials/dashboard/index.jade',
      controller: 'DashboardController'
    })
  }
]);

app.run([
  '$rootScope', '$location', 'loginFactory', 
  function($rootScope, $location, loginFactory)
  {
    $rootScope
    .$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams)
    {
      if (toState.name == 'dashboard')
      {
        loginFactory.isLogged().success(function(data)
        {
          if (!data)
          {
            e.preventDefault();
            $location.path('/login');
          }
        });
      }
    });
  }
]);

app.factory('loginFactory', [
  '$http', '$location',
  function($http, $location)
  {
    return {
      isLogged: function()
      {
          // assume i made this sleep for 5 seconds
          return $http.get('/auth/loggedin'); 
      }
    }
  }
]);

但是，如果我要在我的端点上休眠 5 秒，那么用户将点击 /dashboard 页面并在那里坐 5 秒，直到他们被重定向回 /login。在loginFactory.isLogged() 成功告诉他们他们已经完成之前，我有什么想法可以阻止他们前进到/dashboard？

Answer 1

以这种方式配置您的路线：

 $stateProvider.state('dashboard', {
      url: '/dashboard/:collectionId',
      templateUrl: 'partials/dashboard/index.jade',
      controller: 'DashboardController',
      resolve: {
                // assuming your loginfactory is preloaded
            login: function(loginFactory){
                return loginFactory.isLogged();
            }
        },
    })

这将强制路由器更改仅在解决所有依赖项时发生

更多信息可以参考this