angularjs延迟加载app直到指定的条件

时间:2014-10-06 13:36:03

标签: javascript html angularjs user-experience

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

我希望实现的目标如下:

当请求并加载应用时,它既不显示内容,也不显示简单页面。

如果应用程序发现用户未登录或登录过期,则在将应用程序重定向到此auth服务器时,它将继续显示该vanilla页面。

非常感谢这方面的投入。

谢谢,

编辑: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的建议类似。但问题是登陆页面被完全加载,然后被重定向到auth服务器。我知道问题在于它们是独立的服务器,所以它们可以有不同的响应时间。

2 个答案:

答案 0 :(得分:1)

我在mvc 5应用程序中使用了一些东西来完成这项工作。其中最重要的组件是AuthorizeInterceptor。我在我的咖啡/ 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时,它会将此人重定向到应用程序的登录页面。

答案 1 :(得分:0)

由于您绝对没有提供任何代码,因此这里有一个伪示例:

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

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