2014-10-06 77 views
0

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

我寻找实现如下:

当应用程序请求和被加载,它要么不显示内容或显示香草/简单的页面。

如果应用程序发现用户未登录或登录过期,那么它将继续显示香草页面,同时将应用程序重定向到此auth服务器。

真的很感激在这方面的投入。

感谢,

编辑: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服务器。我知道问题在于它们是独立的服务器,因此它们可能有不同的响应时间。

回答

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

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

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请求的结果,将这个人重定向到应用程序的登录页面。