$state와 함께 $state 메서드 사용Angular UI 라우터의 ChangeStart to State 및 fromState

$state와 함께 $state 메서드 사용Angular UI 라우터의 ChangeStart to State 및 fromState

나는 핸들러를 쓰고 있다.$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서비스가 메서드에서 상태 구성 재정의를 수락할 수 없습니다.

무한 루핑은 우리 측의 실수로 인해 발생했어요.난 이게 싫어서 더 나은 답을 찾고 있어.

제안 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');
    };
});

저는 당신의 질문의 범위를 벗어난다고 생각하여 쿠키의 논리를 바꾸지 않았습니다.

제안 2

Helper를 생성하여 보다 모듈식으로 작업할 수 있습니다.

가치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
    };
  };
});

이제 도우미를 사용하여 상태 Configuration에 상태 Configuration을 추가할 수 있습니다.

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

이렇게 하면 반복된 코드를 추상화하여 보다 모듈화된 솔루션을 만들 수 있습니다.

주의: 위의 코드는 테스트되지 않았습니다.

언급URL : https://stackoverflow.com/questions/21891218/using-state-methods-with-statechangestart-tostate-and-fromstate-in-angular-ui