Подтвердить что ты не робот

Использование $state методов с $stateChangeStart toState и fromState в Angular ui-router

Я пишу обработчик для $stateChangeStart:

var stateChangeStartHandler = function(e, toState, toParams, fromState, fromParams) {
    if (toState.includes('internal') && !$cookies.MySession) {
        e.preventDefault();
        // Some login stuff.
    }
};

$rootScope.$on('$stateChangeStart', stateChangeStartHandler);

toState не имеет метода include. Должен ли я делать что-то другое, или есть способ сделать то, что я пытаюсь сделать?

Кроме того, когда//некоторый элемент ввода включает в себя $state.go(...), я получаю бесконечный цикл. Что может вызвать это?

Вот более полный пример, демонстрирующий, что мы в конечном итоге приступили к работе:

angular.module('test', ['ui.router', 'ngCookies'])
.config(['$stateProvider', '$cookiesProvider', function($stateProvider, $cookiesProvider) {

    $stateProvider
    .state('public', {
        abstract: true
    })
    .state('public.login', {
        url: '/login'
    })
    .state('tool', {
        abstract: true
    })
    .state('tool.suggestions', {
        url: '/suggestions'
    });

}])
.run(['$state', '$cookies', '$rootScope', function($state, $cookies, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {

        if (toState.name.indexOf('tool') > -1 && !$cookies.Session) {
            // If logged out and transitioning to a logged in page:
            e.preventDefault();
            $state.go('public.login');
        } else if (toState.name.indexOf('public') > -1 && $cookies.Session) {
            // If logged in and transitioning to a logged out page:
            e.preventDefault();
            $state.go('tool.suggestions');
        };
    });
});

Мне не нравится использовать indexOf для поиска определенного состояния в toState. Это кажется наивным. Я не уверен, почему toState и fromState не могли быть экземпляром службы $state или почему служба $state не могла принять переопределение конфигурации состояния в своих методах.

Бесконечная петля была вызвана ошибкой с нашей стороны. Мне это не нравится, поэтому я все еще ищу ответы.

4b9b3361

ОТВЕТЫ

Ответ 1

Предложение 1

Когда вы добавляете объект в $stateProvider.state, этот объект затем передается с состоянием. Таким образом, вы можете добавить дополнительные свойства, которые вы можете прочитать позже, когда это необходимо.

Пример конфигурации маршрута

$stateProvider
.state('public', {
    abstract: true,
    module: 'public'
})
.state('public.login', {
    url: '/login',
    module: 'public'
})
.state('tool', {
    abstract: true,
    module: 'private'
})
.state('tool.suggestions', {
    url: '/suggestions',
    module: 'private'
});

Событие $stateChangeStart дает вам доступ к объектам toState и fromState. Эти объекты состояния будут содержать свойства конфигурации.

Пример проверки свойства настраиваемого модуля

$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
    if (toState.module === 'private' && !$cookies.Session) {
        // If logged out and transitioning to a logged in page:
        e.preventDefault();
        $state.go('public.login');
    } else if (toState.module === 'public' && $cookies.Session) {
        // If logged in and transitioning to a logged out page:
        e.preventDefault();
        $state.go('tool.suggestions');
    };
});

Я не изменил логику файлов cookie, потому что я думаю, что это не соответствует вашему вопросу.

Предложение 2

Вы можете создать помощника, чтобы заставить вас работать более модульно.

Значение publicStates

myApp.value('publicStates', function(){
    return {
      module: 'public',
      routes: [{
        name: 'login', 
        config: { 
          url: '/login'
        }
      }]
    };
});

Значение privateStates

myApp.value('privateStates', function(){
    return {
      module: 'private',
      routes: [{
        name: 'suggestions', 
        config: { 
          url: '/suggestions'
        }
      }]
    };
});

Помощник

myApp.provider('stateshelperConfig', function () {
  this.config = {
    // These are the properties we need to set
    // $stateProvider: undefined
    process: function (stateConfigs){
      var module = stateConfigs.module;
      $stateProvider = this.$stateProvider;
      $stateProvider.state(module, {
        abstract: true,
        module: module
      });
      angular.forEach(stateConfigs, function (route){
        route.config.module = module;
        $stateProvider.state(module + route.name, route.config);
      });
    }
  };

  this.$get = function () {
    return {
      config: this.config
    };
  };
});

Теперь вы можете использовать помощник, чтобы добавить конфигурацию состояния в конфигурацию состояния.

myApp.config(['$stateProvider', '$urlRouterProvider', 
    'stateshelperConfigProvider', 'publicStates', 'privateStates',
  function ($stateProvider, $urlRouterProvider, helper, publicStates, privateStates) {
    helper.config.$stateProvider = $stateProvider;
    helper.process(publicStates);
    helper.process(privateStates);
}]);

Таким образом вы можете абстрагироваться от повторяющегося кода и придумать более модульное решение.

Примечание: код выше не протестирован