angularjs – 使用$state方法与$stateChangeStart toState和from

发布时间：2020-12-17 08:36:00 所属栏目：安全来源：网络整理

导读：我正在写一个处理程序$ stateChangeStart： var stateChangeStartHandler = function(e,toState,toParams,fromState,fromParams) { if (toState.includes('internal') !$cookies.MySession) { e.preventDefault(); // Some login stuff. }};$rootScope.$on('

我正在写一个处理程序$ 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没有包含方法。我应该做不同的事情，还是有办法做我想做的事？

此外，当一些登录东西包括$ 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,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服务不能接受在其方法中的状态配置覆盖。

无限循环是由我们的错误引起的。我不喜欢这个，所以我仍然在寻找更好的答案。

建议1

当你添加一个对象到$ stateProvider.state那个对象然后传递状态。因此，您可以添加其他属性，稍后您可以在需要时阅读。

路由配置示例

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

$ stateChangeStart事件允许您访问toState和fromState对象。这些状态对象将包含配置属性。

示例检查自定义模块属性

$rootScope.$on('$stateChangeStart',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);
}]);

这样，你可以抽象重复的代码，并提出一个更模块化的解决方案。

注意：上面的代码没有测试

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!