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。关于如何阻止他们前往/dashboard直到loginFactory.isLogged()成功告诉他们已完成的任何想法？

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

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

1 个答案: