angularjs - $http 拦截器中的 Angular UI Bootstrap 模式对话框挂起浏览器

Question

我正在尝试实现惰性授权，它只会在用户触发对需要身份验证的 API 的调用时引入登录对话框。我正在使用 Bootstrap ui.bootstrap.modal (和模态中的 ui.bootstrap.alert)。问题是这些指令明确指定以下 teamplateUrl的:

• template/modal/backdrop.html(在 modal.js here 中)
• template/modal/window.html(在 modal.js here 中)
• template/alert/alert.html(在 alert.js here 中)

像这样:

.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 中引入登录对话框。重载上述网址。

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

.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;
          }
}}]);

工作演示是 here

任何人都可以建议不涉及对 ui.bootstrap.modal 中使用的 templateUrls 进行硬编码的方法吗？和 ui.bootstrap.alert ？

我也将其报告为 issue在 github 上。

Answer 1

解决此问题的一个简单方法是不对任何以 template/ 开头的 URL 的请求强制执行身份验证。像这样:

      $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;
            },
          }
        }
      ]);

笨蛋:http://plnkr.co/edit/RfkTmGinobxIWmg1BrMJ?p=preview