我正在写一个处理程序$ 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);
- }]);
注意:上面的代码没有测试