상태 제공자의 해결 방법에서 각도 응용 프로그램의 상태를 변경하십시오.

Question

각도 응용 프로그램에서 ui-router를 사용하고 있습니다. 현재 나는 두 경로/로그인 &/user를 가지고 있습니다. 처음에는 사용자가 로그인 버튼을 클릭하면 AJax 요청을 보내고 사용자 ID를 가져올 때/로그인하는 것을 보여줍니다. 나는 사용자 ID를 localstorage에 저장하고 상태를/user로 변경합니다.

사용자가 로그인하지 않은 상태에서 사용자가 주소 표시 줄을/user로 변경하면보기가 변경되지 않고 주소창 URL이/signin으로 다시 변경됩니다.

해결 방법을 사용하려고하지만 작동하지 않습니다. 내 코드 : -

module.exports = function($stateProvider, $injector) { 
$stateProvider 
.state('signin', { 
    url: '/signin', 
    template: require('../templates/signin.html'), 
    controller: 'LoginController' 
}) 
.state('user', { 
    url: '/user/:id', 
    template: require('../templates/user.html'), 
    resolve:{ 
     checkLogin: function(){ 
      var $state = $injector.get('$state'); 
      console.log("in resolve"); 
      if (! window.localStorage.getItem('user-id')) { 
       console.log("in if") 
        $state.go('signin'); 
      } 
     } 
    }, 
    controller: 'UserController' 
}) 

} 

이 문제를 해결하는 데 도움을주십시오.

Answer 1

상태 전환 도중에 상태를 변경하는 것이 허용되지 않는다고 생각합니다.

따라서 주소를 지정하는 방법은 checkLogin 매개 변수를 해결하는 것입니다 (아래에서이 값을 userId으로 변경했습니다). 값 또는 약속을 반환하는 함수가 될 수 있습니다 (이 경우 거부 된 약속, 가능한 경우 'user-id').

그러면 $rootScope.$on('$stateChangeError')에서 처리하고 오류 코드를 확인해야합니다.

resolve: { 
    userId: function ($q, $window) { 
     var userId = $window.localStorage.getItem('user-id'); 
     if (!userId) { 
     return $q.reject("signin") 
     } 

     return userId; 
    } 
} 

그리고 $stateChangeError 처리기에서 리디렉션 : 사람이 문제가있는 경우

이

$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) { 
    if (error === "signin") { 
     $state.go("signin"); 
    } 
}); 

Answer 2

, 당신이 그것을 해결할 수, 타임 아웃 서비스를 사용. 대기열의 끝에서 상태 전환 호출을 보냅니다.

또한 약속을 사용해야합니다. 이를 거부하면 해당 상태가 초기화되지 않습니다.

resolve:{ 
    checkLogin: function(){ 

     var deferred = $q.defer(); 

     var $state = $injector.get('$state'); 
     if (!window.localStorage.getItem('user-id')) { 
      $timeout(function(){$state.go('signin');}); 
      deferred.reject(); 
     } else { 
      deferred.resolve(); 
     } 

     return deferred.promise; 
    } 
},