ui路由器如果解析失败,为什么要加载视图

时间:2014-08-11 07:36:49

标签: angularjs angular-ui-router

可能我想念一些东西但是 如果我设置这样的状态:

.state('session_register', {
        url: '/privatearea',
        resolve: {
            isLogged: function(Session){
                return Session.isLogged();
            } 
        },
        templateUrl: 'private/user.html',
        controller:'UserController'
 })

如果isLogged返回401状态(解决失败)

即使我没有在浏览器中看到user.html

部分刚装载(萤火虫)

所以我想知道

这是通缉行为吗?

有没有办法不加载部分

何时解决失败?

我还有一个httpInterceptor

.factory('httpInterceptor', ['$q', '$location',
    function($q, $location) {
      return {
        'response': function(response) {
          if (response.status === 401) {
            $location.path('/auth/login');
            return $q.reject(response);
          }
          return response || $q.when(response);
        },

        'responseError': function(rejection) {

          if (rejection.status === 401) {
            $location.url('/auth/login');
            return $q.reject(rejection);
          }
          return $q.reject(rejection);
        }

      };
    }
  ])
//Http Interceptor to check auth failures for XHR requests
.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
  }
]);

结束

.factory('httpInterceptor', ['$q','$location',function ($q,$location) {
        var canceller = $q.defer();
        return {
            'request': function(config) {
                // promise that should abort the request when resolved.
                config.timeout = canceller.promise;
                return config;
            },
            'response': function(response) {
                return response;
            },
            'responseError': function(rejection) {
                if (rejection.status === 401) {
                    canceller.resolve('Unauthorized'); 
                    $location.url('/user/signin');
                    return $q.reject(rejection);
                }
                if (rejection.status === 403) {
                    canceller.resolve('Forbidden');  
                    $location.url('/');
                    return $q.reject(rejection);
                }
                return $q.reject(rejection);
            }

        };
    }
    ])
    //Http Intercpetor to check auth failures for xhr requests
   .config(['$httpProvider',function($httpProvider) {
        $httpProvider.interceptors.push('httpInterceptor');
    }]);

它有效:)

1 个答案:

答案 0 :(得分:1)

我认为这是设计上的。除了额外的带宽,不需要阻止模板加载,否则视图将变慢。

也无法改变这种行为。来自源代码:

https://github.com/angular-ui/ui-router/blob/0.2.10/src/state.js#L1158

dst.resolve = $resolve.resolve(state.resolve, locals, dst.resolve, state);
var promises = [ dst.resolve.then(function (globals) {
  dst.globals = globals;
}) ];
if (inherited) promises.push(inherited);

// Resolve template and dependencies for all views.
forEach(state.views, function (view, name) {
  var injectables = (view.resolve && view.resolve !== state.resolve ? view.resolve : {});
  injectables.$template = [ function () {
    return $view.load(name, { view: view, locals: locals, params: $stateParams, notify: false }) || '';
  }];

  promises.push($resolve.resolve(injectables, locals, dst.resolve, state).then(function (result) {
    // References to the controller (only instantiated at link time)
    if (isFunction(view.controllerProvider) || isArray(view.controllerProvider)) {
      var injectLocals = angular.extend({}, injectables, locals);
      result.$$controller = $injector.invoke(view.controllerProvider, null, injectLocals);
    } else {
      result.$$controller = view.controller;
    }
    // Provide access to the state itself for internal use
    result.$$state = state;
    result.$$controllerAs = view.controllerAs;
    dst[name] = result;
  }));
});

// Wait for all the promises and then return the activation object
return $q.all(promises).then(function (values) {
  return dst;
});

来自state.resolve的承诺:

$resolve.resolve(state.resolve, locals, dst.resolve, state);

$view.load(对templateUrl发出http请求):

$view.load(name, { view: view, locals: locals, params: $stateParams, notify: false })

不要等待彼此先完成,它会在pararell中发生,并在return语句中使用:

return $q.all(promises).then(function (values) {

希望这清楚。