简体   繁体   English

AngularJS中具有Infinity-scroll的授权拦截器

[英]Authorization interceptor with Infinity-scroll in AngularJS

I'm using angular-http-auth for intercepting 401 response in order to display login dialogue and when the user is authorized, to retry failed request. 我正在使用angular-http-auth来拦截401响应,以便显示登录对话框,并在授权用户时重试失败的请求。

Since I'm using infinity-scroll I'm increasing an offset value, with every additional upload: 由于我使用的是infinity-scroll ,因此每增加一次上传,我都会增加一个偏移值:

var upload = function () {
                 dataResource.query($scope.model).then(function (result) {
                     angular.forEach(result.items, function (value) {                            
                         $scope.items.push(value);
                     });                        
                 });
             }

$scope.uploadMore = function () {                    
                        $scope.model.Offset = $scope.model.Offset + 10;
                        upload();                                            
                    }; 
upload();

When my page loads up it immediately sends 2 request to server upload(), invoked from this directive, and uploadMore() by infinity-scroll . 当我的页面加载完毕后,它会立即向服务器upload()发出两个请求,此请求是从此指令调用的,并通过infinity-scroll将其发送到uploadMore()。

However, after user has logged in, the page does not display the first 10 entries, instead it displays 11-20 items 2 times in a row . 但是,用户登录后, 该页面不会显示前10个条目,而是连续2次显示11-20个项目

When I tried to debug it, I noticed that when angular-http-auth retries requests it uses increased by 10 Offset value for both queries( $scope.module argument). 当我尝试调试它时,我注意到当angular-http-auth重试请求时,这两个查询使用的偏移量值增加了10( $scope.module参数)。

Functions upload() and uploadMore() are running for 2 times before angular-http-auth , so I guess that is why interceptor uses updated argument for both queries. 函数upload()uploadMore()angular-http-auth之前运行了2次,所以我猜这就是为什么拦截器对两个查询都使用更新参数的原因。

Could somebody please help me with this problem? 有人可以帮我解决这个问题吗?

So you can resolve this problem prevent execute request until previous will finish. 因此,您可以解决此问题,防止执行请求,直到上一个操作完成为止。 The faster way to do that is : 更快的方法是:

var pending = false;
var upload = function () {
            if(!pending) {
             pending = true;
             dataResource.query($scope.model).then(function (result) {
                 pending = false;
                 angular.forEach(result.items, function (value) {                            
                     $scope.items.push(value);
                 });                        
             });
            }
         }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM