Question

我有简单的api和授权点

当我请求api时，如果令牌无效（令牌失效超过五分钟），则获得401.

我知道我可以用

拦截401

app.factory("HttpErrorInterceptorModule", ["$q", "$rootScope", "$location",
    function($q, $rootScope, $location) {
        var success = function(response) {
            // pass through
            return response;
        },
            error = function(response) {
                if(response.status === 401) {
                    // dostuff
                }

                return $q.reject(response);
            };

        return function(httpPromise) {
            return httpPromise.then(success, error);
        };
    }
]).config(["$httpProvider",
    function($httpProvider) {
        $httpProvider.responseInterceptors.push("HttpErrorInterceptorModule");
    }
]);

但我希望捕获并排队请求并显示登录表单如果成功则更改令牌（它是标题）并再次执行请求

Answer 1

您可以稍微使用$ httpInterceptor。如果您想在登录后将用户重定向到用户实际失败的页面，您需要在某些服务中缓存失败的请求，然后在登录后将用户重定向到某个地方（我相信您的登录逻辑）。

但是您可能需要使用一些测试端点来保护您的控制器免受无限制访问，您可能需要使用解析https://thinkster.io/egghead/resolve/ 因此，在这种情况下，您将收到与对proctedted端点的限制访问相关的错误，但不会与您的页面相关。

为了解决这个问题，我使用了标记参数（或标题）来找出登录后我应该重定向用户的位置。

以下是httpInterceptor的示例。

angular.factory('httpInterceptor', function ($q, $rootScope, $log, someService) {
    return {
        request: function (config) {
            return config || $q.when(config)
        },
        response: function (response) {
            return response || $q.when(response);
        },
        responseError: function (response) {
            if (response.status === 401) {
                //here I preserve login page 
                someService
                   .setRestrictedPageBeforeLogin(
                            extractPreservedInfoAboutPage(response)
                    )
                $rootScope.$broadcast('error')
            }
            return $q.reject(response);
        }
    };
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});

Answer 2

angular-http-auth模块提供拦截请求的服务，并在用户登录后将其重新发送。

此服务还会触发下面的这些事件，因此您可以收听它们并决定屏幕上显示的内容

事件：AUTH-loginRequired
事件：AUTH-loginCancelled
事件：AUT-loginConfirmed

查看代码。它只有几行代码

https://github.com/witoldsz/angular-http-auth

处理Angular 401响应

2 个答案: