2016-03-31 11 views
0

最近、アプリで認証を実装したときに$stateChangeStartイベントの問題が発生しました。私はこのようなブール値を持ついくつかのページへのアクセス制限:角度uiルータ最大呼び出しスタックサイズを超えました

.state('login', { 
       url:'/login', 
       templateUrl: 'modules/authentication/views/login.html', 
       controller: 'LoginController', 
       data: { 
        requireAuthentication: false 
       } 
      }) 

を、私は任意の認証データがある場合は、チェックしたいとユーザーがrequireAuthentication: trueとルートにアクセスすると、彼は自動的にログインページにリダイレクトされます。つまり、これが標準の認証動作です。

実装中にMaximum call stack size exceededエラーが発生しました。私は4行目の夜間、10行のコードで間違っているものを見つけました。

私は実際の解決策(私として)を見ている人のための私の実用的な解決策で回答を投稿します。私はそれが他のメンバーのためのエッセンスであると思います。

答えて

1

だから、私のための実用的なソリューションがあります:

angular.module('YourModule', [...dependecies...]) 
 

 
    .run(function($rootScope, $cookies, $state) { 
 
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) { 
 
     var shouldLogin = toState.data.requireAuthentication !== undefined 
 
      && toState.data.requireAuthentication; 
 

 
     // NOT authenticated - wants any private stuff 
 
     if(shouldLogin || fromState.name === "") { 
 
      var token = $cookies.get('JWT') == null ? null : $cookies.get('JWT'); 
 
      if (token == null) { 
 
       if(toState.name === 'login') 
 
        return; 
 
       $state.go('login'); 
 
       event.preventDefault(); 
 
      } else { 
 
       if(toState.name === toState.name) 
 
        return; 
 
       //TODO: Check token 
 
       $state.go(toState.name); 
 
       event.preventDefault(); 
 
      } 
 
     } 
 
    }); 
 
});

だから、私は$cookiesから私の認証データを取得しています。それらがnullの場合、私はlogin州にリダイレクトします。

最もimportaint部分は、以下のとおりです。あなたが最初

if(toState.name === toState.name) 
    return; 

if(toState.name === 'login') 
    return; 

両方の式が見れば、本当にページを開いたときに

fromState.name === "" この式は、イベントハンドラの火を作ります病気ですが、彼らはトリックを行います。スタックサイズが例外を超えないようにします。

Firefox、Chrome、Opera、Mozilla、Yandexブラウザで上記のコードをテストしましたので、うまくいくと思います。

関連する問題