1

数日前に AngularJS を使い始めたばかりで、サーバーの応答から 401 ステータスをインターセプトするインターセプターに問題があります。

401 が返され、そのイベントでリダイレクトがトリガーされると、「loginRequired」タイプのメッセージをブロードキャストします。

問題は、ログインしていないときに制限されたページにアクセスしようとすると、ログイン ページにリダイレクトされる前にページが一瞬点滅することです。私はまだ非同期のもの、約束などのかなりの初心者です。誰かが私が間違っていることを指摘できますか?

これが私のインターセプターです。ご覧のとおり、非常に単純ですが、要点を説明するために簡略化し、さらに発展させる前に物事を理解しようとしています。

インターセプター

var services = angular.module('services', []);

services.factory('myInterceptor', ['$q', '$rootScope',
  function($q,$rootScope) {

    var myInterceptor = {

      'responseError': function(rejection) {
        $rootScope.$broadcast('event:loginRequired');
        return $q.reject(rejection);
      }
    };

    return myInterceptor;
  }
]);

私のインターセプターの注入

myApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
}]);

制限ページへのルート

.when('/restrictedPage', {
  templateUrl: 'partials/restrictedPage.html',
  controller: 'RestrictedPageController'
}).

制限付きページ コントローラー

controllers.controller('RestrictedPageController', function($scope) {

  //Some times the alert pops up, sometimes not.
  alert("Damn it I shouldn't be there");

});

$rootScope イベント ウォッチャー

$rootScope.$on('event:loginRequired', function() {

  //Only redirect if we aren't on free access page
  if ($location.path() == "/freeAccess")
    return;

  //else go to the login page
  $location.path('/home').replace();

});

私の問題は明らかに、インターセプターと $q の処理方法にあります。githubでインターセプターを作成する別の方法を見つけましたが、それは公式ドキュメントが使用する方法ではないため、古い方法である可能性があり、工場に入れるほどクリーンではないと思います。彼は、モジュールの config 関数でルートを定義した後、このコードを配置するだけです。しかし、このコードは機能し、ページがフラッシュされません。

Github で見つけた別の方法

var interceptor = ['$rootScope', '$q', '$log',
  function(scope, $q, $log) {

    function success(response) {
      return response;
    }

    function error(response) {
      var status = response.status;

      if (status == 401) {
        var deferred = $q.defer();
        var req = {
          config: response.config,
          deferred: deferred
        };
        scope.$broadcast('event:loginRequired');
        return deferred.promise;
      }
      // otherwise
      return $q.reject(response);

    }

    return function(promise) {
      return promise.then(success, error);
    };

  }
];
$httpProvider.responseInterceptors.push(interceptor);

しかし、私の目標は「機能させる」ことだけではなく、「壊れていない場合は直さないでください」というマントラが嫌いです。自分のコードの問題を理解したい。ありがとう！

4

1 に答える 1

2

インターセプターから「event:loginRequired」をブロードキャストする代わりに、インターセプター内でロケーション パスの変更を実行してみてください。ブロードキャストは、401 を受信して​​から場所を変更するまでの遅延を増加させ、画面の「フラッシュ」の原因となる可能性があります。

services.factory('myInterceptor', ['$q', '$rootScope', '$location',
  function($q, $rootScope, $location) {

    var myInterceptor = {

      'responseError': function(rejection) {
         if (response.status === 401 && $location.path() !== '/freeAccess') {
           //else go to the login page
           $location.path('/home').replace();
         }
         // otherwise
         return $q.reject(response);
      }
    };

    return myInterceptor;
  }
]);

アプリ モジュールが最初に実行されたときに HTTP 要求を実行して、ユーザーが承認されているかどうかをすぐに判断することもできます。

myApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
}])
.run(function($http) {
  //if this returns 401, your interceptor will be triggered
  $http.get('some-endpoint-to-determine-auth'); 
});
于 2014-07-25T04:39:12.537 に答える