在 Angular ui-router 中使用带有 $stateChangeStart toState 和 fromState 的 $state 方法 [英] Using $state methods with $stateChangeStart toState and fromState in Angular ui-router

问题描述

我正在为 $stateChangeStart 编写一个处理程序:

I'm writing a handler for $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 没有包含方法.我应该做些不同的事情，还是有办法做我想做的事情?

toState does not have the includes method. Should I be doing something different, or is there a way to do what I'm trying to do?

此外，当//some login stuff 包含 $state.go(...) 时，我会得到一个无限循环.什么可能导致这种情况?

Also, when //some login stuff includes a $state.go(...), I get an infinite loop. What might cause that?

下面是一个更完整的例子，展示了我们最终的工作:

Here's a more complete example demonstrating what we eventually got to work:

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 服务无法在其方法中接受状态配置覆盖.

I don't like using indexOf to search for a particular state in the toState. It feels naive. I'm not sure why toState and fromState couldn't be an instance of the $state service, or why the $state service couldn't accept a state configuration override in its methods.

无限循环是由我们的错误造成的.我不喜欢这个，所以我仍在寻找更好的答案.

The infinite looping was caused by a mistake on our part. I don't love this, so I'm still looking for better answers.

推荐答案

建议1

当您将对象添加到 $stateProvider.state 时，该对象将与状态一起传递.因此，您可以添加其他属性，您可以在以后需要时阅读这些属性.

Suggestion 1

When you add an object to $stateProvider.state that object is then passed with the state. So you can add additional properties which you can read later on when needed.

示例路由配置

$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 对象.这些状态对象将包含配置属性.

The $stateChangeStart event gives you acces to the toState and fromState objects. These state objects will contain the configuration properties.

自定义模块属性的示例检查

$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 的逻辑，因为我认为这超出了您的问题的范围.

I didn't change the logic of the cookies because I think that is out of scope for your question.

你可以创建一个 Helper 来让你的工作更加模块化.

You can create a Helper to get you this to work more modular.

值 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
    };
  };
});

现在您可以使用助手将状态配置添加到您的状态配置中.

Now you can use the helper to add the state configuration to your state configuration.

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

通过这种方式，您可以抽象重复的代码，并提出更模块化的解决方案.

This way you can abstract the repeated code, and come up with a more modular solution.

注意:上面的代码没有经过测试

Note: the code above isn't tested

这篇关于在 Angular ui-router 中使用带有 $stateChangeStart toState 和 fromState 的 $state 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！