3

我正在尝试实现延迟授权，仅当用户触发对需要身份验证的 API 的调用时才会引入登录对话框。我正在使用引导程序ui.bootstrap.modal（和模态中的ui.bootstrap.alert）。问题是这些指令明确指定了以下内容teamplateUrl：

  • 模板/modal/backdrop.html（在modal.js 这里）
  • 模板/模态/window.html（在modal.js 这里）
  • 模板/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，即使模板已经通过$templateCache.put方法或添加<script>标签加载。这基本上导致了我的拦截器中的无限递归，它试图为request上面的 url 带来登录对话框的过载。

这是我的拦截器的简化版本：

.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和中使用的 templateUrls 进行硬编码的方法ui.bootstrap.alert？

我也在 github 上报告了这个问题。

4

2 回答 2

5

解决此问题的一种简单方法是不对任何以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;
            },
          }
        }
      ]);

示例 Plunker： 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;
            },
          }
        }
      ]);

Plunker：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 回答