[英]$http request before AngularJS app initialises?
为了确定用户的会话是否经过身份验证,我需要在加载第一个路由之前向服务器发出$ http请求。 在加载每个路由之前,身份验证服务会检查用户的状态以及路由所需的访问级别,如果用户未针对该路由进行身份验证,则会重定向到登录页面。 然而,当第一次加载应用程序时,它不知道用户,因此即使他们有经过身份验证的会话,它也将始终重定向到登录页面。 所以为了解决这个问题,我试图向服务器请求用户状态作为应用程序初始化的一部分。 问题是显然$ http调用是异步的,那么在请求完成之前我如何阻止应用程序运行?
我对Angular和前端开发很新,所以我的问题可能是对javascript而不是Angular的误解。
您可以通过在routingProvider中使用resolve
来实现此目的。
这允许您在启动控制器之前等待一些承诺得到解决。
从文档引用:
resolve - {Object。=} - 应该注入控制器的可选依赖关系映射。 如果这些依赖项中的任何一个是promise,路由器将等待它们全部被解析或者在实例化控制器之前被拒绝。 如果成功解决了所有promise,则会注入已解析的promise的值并触发$ routeChangeSuccess事件。
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
myVar: function($q,$http){
var deffered = $q.defer();
// make your http request here and resolve its promise
$http.get('http://example.com/foobar')
.then(function(result){
deffered.resolve(result);
})
return deffered.promise;
}
}}).
otherwise({redirectTo: '/'});
}]);
然后将myVar注入到包含promise数据的控制器中。
您还可以通过返回您要注入的服务来避免额外的DI参数:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
myService: function($q,$http,myService){
var deffered = $q.defer();
/* make your http request here
* then, resolve the deffered's promise with your service.
*/
deffered.resolve(myService),
return deffered.promise;
}
}}).
otherwise({redirectTo: '/'});
}]);
显然,在执行此类操作时,您必须将请求的结果存储在共享服务中的任何位置。
看看Angular Docs / routeProvider
我从egghead.io的那个人那里学到了很多东西
使用sessionCreator
封装所有资源并返回一个promise。 然后resolve
之后到您的控制器,这样您就可以保持它没有特定的promise
代码。
app.factory('sessionCreator', ['$http', '$q', 'urlApi',
function ($http, $q, urlApi) {
var deferred = $q.defer();
$http.get(urlApi + '/startPoint').success(function(data) {
// Do what you have to do for initialization.
deferred.resolve();
});
return deferred.promise;
}
]);
app.factory('Product', ['$resource', 'urlApi', 'sessionCreator',
function($resource, urlApi, sessionCreator) {
// encapsulate all yours services with `sessionCreator`
return sessionCreator.then(function() {
return $resource(urlApi + '/products', {}, {
query: {method:'GET', params:{}, isArray: true}
});
});
}
]);
app.config(['$routeProvider', function ($routeProvider) {
var access = routingConfig.accessLevels;
$routeProvider
.when('/product', {
templateUrl: 'views/products.html', controller: 'ProductCtrl',
// resolve then in router configuration so you don't have to call `then()` inside your controllers
resolve: { Product: ['Product', function(Product) { return Product; }] }
})
.otherwise({ redirectTo: '/' });
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.