2

このコードの無限ループが発生しています。

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        var isLoggedIn = (authService.authentication && authService.authentication.isAuth);
        if (isLoggedIn) {
            //if user is logged and tries to access login page, prevent it
            if (toState.name === 'app.login') {
                event.preventDefault();
                return fromState;
            } 
        } else {
            if (toState.name !== 'app.login') {
                event.preventDefault();
                $state.go('app.login');
                return;
            }
        }
    });

私もこのセットを持っています：

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProvider.otherwise('/main');

    $stateProvider
    .state('app', {
        abstract: true,
        url: '',
        controller: 'mainCtrl',
        controllerAs: 'mainCtrl',
        template:'<div ui-view></div>'      
    })
    .state('app.login', {
        url: '/logn'
        controller: 'loginCtrl',
        controllerAs: 'loginCtrl',
        templateUrl: 'app/security/login.html'
    })
    .state('app.main', {
        url: '/main'
        controller: 'mainCtrl',
        controllerAs: 'mainCtrl',
        templateUrl: 'app/main.html'
    })
    ...
}

ユーザーがサイトに入り、認証が必要なときに、無限のダイジェスト ループが発生します。こんなふうになります：

  1. ユーザーは次のアドレスを入力します: http://localhost
  2. デフォルト ルート (それ以外の場合) が起動し、ユーザーをhttp://localhost/#/mainにリダイレクトします。
  3. $ OnStateChangeStartが ( app.main に対して) 発生し、ユーザーがログインしているかどうかをテストします。ログインしていない場合は、デフォルトのイベント終了が「app.login」にリダイレクトされるのを防ぎます。
  4. $ OnstateChangeStartが ( app.login に対して) 起動し、 toState.name が app.login' であるかどうかをテストします。そうであれば、リダイレクトする必要はないので戻ります。
  5. 理由はわかりませんが、 $ OnStateChangeStartが再び起動しますが、 app.mainが対象です。それは何度も何度も落ちます。

助けてください。

4

1 に答える 1

12

otherwise()メソッド宣言を、現在使用している URL トランジションではなく、状態名トランジションに変更します。この問題が発生したとき、これで解決しました。

例を次に示します。

$urlRouterProvider.otherwise(function($injector, $location){
  $injector.invoke(['$state', function($state) {
    $state.go('app.main');
  }]);
});

を取得し$stateて実行する別の方法は次のとおり$state.goです。

var $state = $injector.get('$state');
$state.go('app.main');

私はAngularの経験があまりないので、なぜこれが解決するのかわかりません。誰か詳しく説明してください!

アップデート

このSO 投稿で受け入れられた回答は、なぜこれが起こるのかについての良い説明を提供しているようです。

于 2015-10-20T10:44:11.740 に答える