Javascript angularjs延迟加载应用程序,直到达到指定条件
如果用户未通过身份验证,我的angular应用程序(SPA)需要重定向到另一台服务器。这是一台单独的机器,这意味着从my angular应用程序重定向到此身份验证服务器时可能会有延迟 我希望实现的目标如下: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
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时,它会将此人重定向到应用程序的登录页面