angularjs + ui-router：當用戶未登錄每個狀態更改時，重定向到登錄頁面

Question

我正在使用angularjs和ui-router構建一個簡單的博客應用程序，我想監聽每個狀態更改並檢查用戶是否已登錄。如果他不是，我想將他重定向到登錄頁面。

這個場景非常簡單，我試圖在沒有運氣的情況下實現這個解決方案 。

這是相關代碼：

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('app', {
        url: '',
        abstract: true
    });
    $urlRouterProvider.otherwise('blogs');
});

app.run(function($rootScope, $state, $location, UserService){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    console.log("state change: from state: " + fromState.name + " to state: " + toState.name);
        let loggedIn = UserService.isLoggedIn();
        if (toState.name !== 'app.login' && !loggedIn){
            event.preventDefault();
            $state.go('app.login');
    });
});

其中'app.login'被定義為登錄狀態，'blogs'是我的主要供稿的網址，我希望該應用程序將在啟動時進入。

在查看chrome控制台時，當沒有用戶登錄時，我看到：

[HMR] Waiting for update signal from WDS...
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (angular.js:68)
    at Scope.$get.Scope.$digest (angular.js:15753)
    at Scope.$get.Scope.$apply (angular.js:15986)
    at bootstrapApply (angular.js:1658)
    at Object.invoke (angular.js:4473)
    at doBootstrap (angular.js:1656)
    at Object.bootstrap (angular.js:1676)
    at Object.<anonymous> (bootstrap.js:4)
    at __webpack_require__ (bootstrap 7b71f5eb02d2540fe63f:520)
    at fn (bootstrap 7b71f5eb02d2540fe63f:75)
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.5/$rootScope/infdig?p0=10&p1=%5B%5D
XHR finished loading: GET "http://localhost:8080/login/login.html".

它出現了好幾次。 此外 - 網址在/ login和/ blogs之間跳轉。

我究竟做錯了什么？

（編輯：我在console.log中添加了一些調試）

Answer 1

出於某種原因，此代碼有效：

app.run(function($rootScope, $state, $location, UserService){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        let loggedIn = UserService.isLoggedIn();
        if  (toState.name !== 'app.login' && !loggedIn){
            $location.url('/login');
        }
    });
});

我改變了從$ state.go到$ location.url重定向到登錄頁面的方式。

每次我使用$state.go它都會觸發另一個$stateChangeStart事件，這顯然是錯誤的。 這樣， event.preventDefault()就不是必需的。

Answer 2

你可以使用“ transitionTo ”。 替換$location.url('/login'); 與$state.transitionTo('login'); ui-router @version v0.2.18