Javascript angularjs延迟加载应用程序,直到达到指定条件

Javascript angularjs延迟加载应用程序,直到达到指定条件,javascript,html,angularjs,user-experience,Javascript,Html,Angularjs,User Experience,如果用户未通过身份验证,我的angular应用程序(SPA)需要重定向到另一台服务器。这是一台单独的机器,这意味着从my angular应用程序重定向到此身份验证服务器时可能会有延迟 我希望实现的目标如下: app.factory('authInterceptorService', ['$q', '$injector', '$location', 'localStorageService', function ($q, $injector, $location, loca

如果用户未通过身份验证,我的angular应用程序(SPA)需要重定向到另一台服务器。这是一台单独的机器,这意味着从my angular应用程序重定向到此身份验证服务器时可能会有延迟

我希望实现的目标如下:

    app.factory('authInterceptorService', ['$q', '$injector', '$location', 'localStorageService',
        function ($q, $injector, $location, localStorageService) {
....
        var request = function (config) {
            config.headers = config.headers || {};
            var fragments = getFragment();
            if(fragments.access_token != undefined)
                localStorageService.add("authorizationData", { token: fragments.access_token, token_type: fragments.token_type, state : fragments.state, });
            var authData = localStorageService.get('authorizationData');
            if(authData)
            {
                config.headers.Authorization = authData.token_type + ' ' + authData.token;
                $location.path( "/dashboard" );
            }
            else
                logout();
            return config;
        };

        var responseError = function (rejection) {
            if (rejection.status === 401) {
                logout();
            }
            return $q.reject(rejection);
        };

        var logout  = function()
        {
            localStorageService.remove('authorizationData');
            var scope = 'my-scope';
                    var uri = addQueryString('http://www.authserver.com/OAuth/Authorize', {
                        'client_id': 'dsfdsafdsafdsfdsfdsafasdf',
                        'redirect_uri': 'www.returnuri.com',
                        'state': 'asdfasfsdf',
                        'scope': 'scope1',
                        'response_type': 'token'
                        });
                window.location.replace(uri);

        };

        authInterceptorServiceFactory.request = request;
        authInterceptorServiceFactory.responseError = responseError;
        authInterceptorServiceFactory.logout = logout;

        return authInterceptorServiceFactory;
    }]);
});
当应用程序被请求并加载时,它要么不显示内容,要么显示普通/简单页面

如果应用程序发现用户未登录或登录已过期,则将继续显示该页面,同时将应用程序重定向到此身份验证服务器

非常感谢您在这方面的投入

谢谢

编辑:interceptor.js代码如下所示:

    app.factory('authInterceptorService', ['$q', '$injector', '$location', 'localStorageService',
        function ($q, $injector, $location, localStorageService) {
....
        var request = function (config) {
            config.headers = config.headers || {};
            var fragments = getFragment();
            if(fragments.access_token != undefined)
                localStorageService.add("authorizationData", { token: fragments.access_token, token_type: fragments.token_type, state : fragments.state, });
            var authData = localStorageService.get('authorizationData');
            if(authData)
            {
                config.headers.Authorization = authData.token_type + ' ' + authData.token;
                $location.path( "/dashboard" );
            }
            else
                logout();
            return config;
        };

        var responseError = function (rejection) {
            if (rejection.status === 401) {
                logout();
            }
            return $q.reject(rejection);
        };

        var logout  = function()
        {
            localStorageService.remove('authorizationData');
            var scope = 'my-scope';
                    var uri = addQueryString('http://www.authserver.com/OAuth/Authorize', {
                        'client_id': 'dsfdsafdsafdsfdsfdsafasdf',
                        'redirect_uri': 'www.returnuri.com',
                        'state': 'asdfasfsdf',
                        'scope': 'scope1',
                        'response_type': 'token'
                        });
                window.location.replace(uri);

        };

        authInterceptorServiceFactory.request = request;
        authInterceptorServiceFactory.responseError = responseError;
        authInterceptorServiceFactory.logout = logout;

        return authInterceptorServiceFactory;
    }]);
});

这与Blackunknown的建议相似。但问题是,登录页会被完全加载,然后它会被重定向到身份验证服务器。我知道问题在于它们是独立的服务器,因此它们可以有不同的响应时间。

由于您完全没有提供任何代码,下面是一个伪示例:

$http.get('yourAuthServer').success(function(response){
    // save session data and redirect the user to the regular page
    $location.path('loggedInRoute');
}).error(function(err){
    // handle the failed authentification here
    $location.path('authFailed');
});

因此,我们的想法是建立一个没有敏感数据的登录页面。您将从主控制器发出身份验证请求,并根据结果正确重定向用户。当然,您应该在登录页面上进行身份验证检查,而不仅仅依赖于重定向。但这将使您开始。

我在MVC5应用程序中使用了一些方法来完成这项工作。其中最重要的部件是拦截器。我在我的coffee/javascripts中使用的类比大多数示例中看到的要多,但主要原则是相同的。我不给你咖啡了这是一些javascript:

(function() {
  "use strict";

  var AuthorizeConfig, AuthorizeInterceptor;

  AuthorizeInterceptor = (function() {
    function AuthorizeInterceptor($q, $location) {
      this.$q = $q;
      this.$location = $location;
      return {
        response: function(response) {
          return response || $q.when(response);
        },
        responseError: function(rejection) {
          if (((rejection != null ? rejection.status : void 0) != null) && rejection.status === 401) {
            $location.path("/Login");
          }
          return $q.reject(rejection);
        }
      };
    }

    return AuthorizeInterceptor;

  })();

  angular.module("myapp").factory("AuthorizeInterceptor", ["$q", "$location", AuthorizeInterceptor]);

  AuthorizeConfig = (function() {
    function AuthorizeConfig($httpProvider) {
      $httpProvider.interceptors.push("AuthorizeInterceptor");
    }

    return AuthorizeConfig;

  })();

  angular.module("myapp").config(["$httpProvider", AuthorizeConfig]);

}).call(this);
当请求导致401时,它会将此人重定向到应用程序的登录页面