3

ユーザーが認証を必要とするAPIへの呼び出しをトリガーした場合にのみログインダイアログを表示する遅延認証を実装しようとしています。私はブートストラップui.bootstrap.modal (およびモーダル内のui.bootstrap.alert ) を使用しています。問題は、これらのディレクティブが以下を明示的に指定していることですteamplateUrl:

  • template/modal/backdrop.html (modal.js ここにあります)
  • template/modal/window.html (modal.js ここにあります)
  • template/alert/alert.html (alert.js ここにあります)

このような：

.directive('modalBackdrop', ['$timeout', function ($timeout) {
  return {
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/modal/backdrop.html',
    link: function (scope, element, attrs) {
      /* ... */
    }
  };
}])

$modal.open()そして、私が呼び出して ui-bootstrap が新しいモーダル ウィンドウの DOM を構築するたびに、Angular は、テンプレートがメソッドまたはタグの追加$httpによって既に読み込まれている場合でも、サービスを介してこれらの URL を解決しようとします。これは基本的に、インターセプターで無限再帰を引き起こし、上記の URL のオーバーロードでログイン ダイアログを表示しようとします。$templateCache.put<script>request

これが私のインターセプターの簡略化されたバージョンです:

.config(['$provide', '$httpProvider', function($provide, $httpProvider) {
    $provide.factory('testInterceptor', ['$injector', function($injector) {
        return {
        'request': function(config) {

            var auth = $injector.get('authService');
            var modal = $injector.get('$modal');
            if (!auth.LoggedIn) {
              var loginModal = modal.open({
                  template: 'Login screen <alert type="warning">some message</alert>',
              });
              return loginModal.result;
            }
            return config;
          }
}}]);

動作デモはこちら

ui.bootstrap.modalとで使用される te​​mplateUrls のハードコーディングを含まないアプローチをアドバイスできますui.bootstrap.alertか?

また、これを githubの問題として報告しました。

4

2 に答える 2

5

これを回避する簡単な方法は、 で始まる URL へのリクエストに対して認証を強制しないことtemplate/です。そのようです：

      $provide.factory('testIntercepter', ['$q', '$injector',
        function($q, $injector) {
          return {
            'request': function(config) {
              if (config.url.indexOf('template/') == 0) {
                log('ignoring ' + config.url);
                return config;
              }

              log(config.method + ' ' + config.url);
              var auth = $injector.get('authService');
              if (!auth.LoggedIn) {
                return auth.Login();
              }
              return config;
            },
          }
        }
      ]);

プランカーの例: http://plnkr.co/edit/kADmHkfHiyKW8kd7aNep?p=preview

より洗練されたオプションは$templateCache、要求された URL が含まれているかどうかを確認し、それらの場合は認証をスキップすることです。

      $provide.factory('testIntercepter', ['$q', '$injector', '$templateCache',
        function($q, $injector, $templateCache) {
          return {
            'request': function(config) {
              if ($templateCache.get(config.url)) {
                log('in $templateCache ' + config.url);
                return config;
              }

              log(config.method + ' ' + config.url);
              var auth = $injector.get('authService');
              if (!auth.LoggedIn) {
                return auth.Login();
              }
              return config;
            },
          }
        }
      ]);

プランカー: http://plnkr.co/edit/RfkTmGinobxIWmg1BrMJ?p=preview

于 2014-11-05T09:10:08.497 に答える
0

を使用する必要はありませんtemplateUrl。このコードをチェックしてください (承認も扱っています)。インラインモーダルテンプレートを使用しています。これは、モーダルを開き、開いているモーダル ダイアログ内でのルーティングを可能にするより大きなスクリプトの一部であるため、モーダル ダイアログで一連のアクションを実行するときにモーダルを閉じる必要はありません。

$modal.open({
     template: "<div data-ng-include='templateUrl'></div>",
     controller: function ($scope, $modalInstance) {

     $modalInstance.opened
         .then(function () {
             if (startRouteName != "unauthorized") {
                 var requiredAuthorizations = 
                        $scope.getRequiredPermissions(startRouteName);
                 if (requiredAuthorizations) {
                     $scope.hasAnyPermission(requiredAuthorizations)
                         .then(function (result) {
                             if (!result) {
                                 startRouteName = "unauthorized";
                             }
                             afterModalOpened($scope);
                     });
                 } else {
                     afterModalOpened($scope);
                 }
             } else {
                 afterModalOpened($scope);
             }
         });
     }
});
于 2014-11-04T15:42:24.947 に答える