很難在AngularJS中使用$ locationChangeStart和$ stateChangeStart事件

我遇到了$locationChangeStart事件觸發多次的經典問題。我試過使用preventDefault，但我似乎無法掌握這一點。

兩個問題 - 第一場景使用$location第二個使用$state：

一旦用戶通過驗證後，我利用重定向$state.go('main')，但是$locationChangeStart再次發射。我不想要這種行爲。
隨着UI路由器$stateChangeStart事件，我基本上打了infinite loop的情況。這意味着，當這個事件發生時，我檢查user authentication。如果用戶未通過身份驗證，那麼我使用$state.go('login');重定向。這會導致無限循環。

這裏是我的app.js對於初學者：

(function() { 
 
    'use strict'; 
 
    angular.module('rage', [ 
 
     'ui.router', 
 
     'ui.bootstrap', 
 
     'ui.dashboard', 
 
     'kendo.directives'  
 
    ]).run(['$rootScope', '$state', '$location', 'userService', 'loginService', init]); 
 

 
    function init($rootScope, $state, $location, userService, loginService) { 
 
     $rootScope.rageSessionVars = {}; 
 
     $rootScope.$state = $state;   
 
     $rootScope.isLoggedin = false; // just something to possibly use ??? 
 

 

 
     $rootScope.$on('$locationChangeStart', function() { 
 

 
      var userToken = loginService.getUserCookie(); 
 

 
      // check if cookie expired, then authenticate user ! 
 
      if (userToken) { 
 
       if (!loginService.isUserCookieExpired(userToken)) { 
 
        if (loginService.authUser(userToken)) { 
 
         $state.go('main'); 
 
        } 
 
        else {      
 
         $location.url('index.html#/?login'); // not authenticated ! 
 
        } 
 
       } 
 
      } 
 
      else { 
 
       $state.go('login'); 
 
       $location.url('index.html#/?login'); 
 
      } 
 
     }); 
 

 
    } 
 

 
})();

我昨天還創建了一個plunker了類似的情況，並簡單修改app.js到現在包括locationChangeStart事件。

在線plunker這裏：http://plnkr.co/edit/hsSrPqFp0hpJ4A8cTsVL?p=preview

底線是，我想掛接到這些事件流暢的用戶登錄/退出的經驗之一，但我一直在與這些角事件碰釘子結束。

預先感謝您的專家提示。

問候，鮑勃

來源

2015-10-14 bob.mazzo

這樣做根據路由解析器總是可取的http://stackoverflow.com/a/33021912/3731501 – estus

當使用角UI路由器時，使用$stateChangeStart和$stateChangeSuccess期間狀態改變到控制像認證和手動路由動作。

來源

2015-10-14 22:10:00

我正在使用'$ stateChangeStart'，但我遇到了類似的情況，它會多次觸發。也許我應該重新訪問$ stateChangeStart事件 –

好吧，所以我已經更新了我的plunk以包含'$ rootScope。$ on（'$ locationChangeStart'）'。我似乎已經在無限期的循環中。我的天啊 - http://plnkr.co/edit/hsSrPqFp0hpJ4A8cTsVL return token; }; –

我已經熟悉像'$ stateChangeStart'這樣的角度ui路由事件，但正如我之前提到的 - 我很難實現它們。請參閱我的plunk，它在我的'$ stateChangeStart'中有一個無限循環。注意：在我的app.js中，我添加了一個'return;'語句來防止現在的無限循環。 –

很難在AngularJS中使用$ locationChangeStart和$ stateChangeStart事件

回答

相關問題