Angularjs ui-router. <strong>대시 보드</strong>, <strong></strong> dahboard.main, <strong>dashboard.minor</strong>, <strong>로그인</strong> : 어떻게 페이지

Question

를 로그인 리디렉션 나는 4 개 상태를 가지고있다. 대시 보드는 추상이며 .minor 및 .main 상태의 부모 상태입니다. 당신은 내가 해결 옵션이 대시 보드 상태에서 보듯이

.state('dashboard', { 
     url: "/dashboard", 
     abstract: true, 
     templateUrl: "views/dashboard.html", 
     resolve: { 
      auth: function ($q, authenticationSvc) { 
       var userInfo = authenticationSvc.getUserInfo(); 
       if (userInfo) { 
        return $q.when(userInfo); 
       } else { 
        return $q.reject({ authenticated: false }); 
       } 
      } 
     }, 
     controller: "DashboardCtrl", 
     data: { pageTitle: 'Example view' } 
    }) 
    .state('dashboard.main', { 
     url: "", 
     templateUrl: "views/main.html", 
     controller: "DashboardCtrl", 
     data: { pageTitle: 'Main view' } 
    }) 

: 다음은 내 코드입니다. 이를 통해 권한이없는 사용자를 로그인 페이지로 리디렉션하려고합니다.

.factory("authenticationSvc", ["$http", "$q", "$window", function ($http, $q, $window) { 
    var userInfo; 

    function login(email, password) { 
     var deferred = $q.defer(); 

     $http.post("/api/login", { email: email, password: password }) 
      .then(function (result) { 
       if(result.data.error == 0) { 
        userInfo = { 
         accessToken: result.data.accessToken 
        }; 
        $window.sessionStorage["userInfo"] = JSON.stringify(userInfo); 
        deferred.resolve(userInfo); 
       } 
       else { 
        deferred.reject(error); 
       } 
      }, function (error) { 
       deferred.reject(error); 
      }); 

     return deferred.promise; 
    } 
    function getUserInfo() { 
     return userInfo; 
    } 
    return { 
     login: login, 
     logout: logout, 
     getUserInfo: getUserInfo 
    }; 
}]); 

내가 확인 인증 값 설정 에서 :

.run(function($rootScope, $location, $state) { 
    $rootScope.$state = $state; 
    $rootScope.$on("routeChangeSuccess", function(userInfo) { 
     consol.log(userInfo); 
    }); 
    $rootScope.$on("routeChangeError", function(event, current, previous, eventObj) { 
     if(eventObj.authenticated === false) { 
      $state.go('login'); 
     } 
    }); 
}); 

그러나 불행하게도 나는 내 웹 사이트의 루트 또는 대시 보드 상태로 갈 때 빈을 얻을 이런 이유로 나는 특별한 authenticationSvc 서비스를 사용 페이지. 이 코드의 문제점은 무엇입니까? 감사!

Answer 1

필요하지 않은 경우 리디렉션하지 않습니다. === 의도 한 상태로 이미 리디렉션 된 경우입니다. a working plunker는

.run(function($rootScope, $location, $state, authenticationSvc) { 


    $rootScope.$on('$stateChangeStart', function(e, toState , toParams 
                , fromState, fromParams) { 

     var isLogin = toState.name === "login"; 
     if(isLogin){ 
      return; // no need to redirect 
     } 

     // now, redirect only not authenticated 

     var userInfo = authenticationSvc.getUserInfo(); 

     if(userInfo.authenticated === false) { 
      e.preventDefault(); // stop current execution 
      $state.go('login'); // go to login 
     } 
    }); 
}); 

점검 유사한 솔루션이 유사한 설명이 :

• Angular ui router - Redirection doesn't work at all
• How can I fix 'Maximum call stack size exceeded' AngularJS

Answer 2

UI 라우터 모듈을 사용하고 있으므로 $stateChangeStart, 이벤트를 사용해야합니다.

확인 이상이 링크 : https://github.com/angular-ui/ui-router/issues/17

또한 콘솔에서 consol.log(userInfo)에 오타가있다.

chrome-dev-tools에서 콘솔을 확인하십시오. 뭔가 다른 것이 빠진다면 아이디어를 줄 것입니다.

Answer 3

가 실제로 $stateChangeSuccess 이벤트가 이되지 않습니다주의 더 이상 사용할 수있는 angular-ui-route p ackage. 이제이 동작은 transition hooks에 의해 처리됩니다.

run.$inject = ['$transitions', 'authenticationSvc']; 
function run($transitions, authenticationSvc) { 

    $transitions.onStart({}, function (trans) { 
    var userInfo = authenticationSvc.getUserInfo(); 

    var $state = trans.router.stateService; 

    if(userInfo.authenticated === false) { 
     $state.go('login'); // go to login 
    } 
    }); 
}