AngularJs：如果抛出未经授权的请求错误刷新令牌并恢复所有请求，如何保存所有$http请求答案

【问题标题】：AngularJs: how to hold all the $http request if its thrown unauthorised request error refresh token and resume all the requestAngularJs：如果抛出未经授权的请求错误刷新令牌并恢复所有请求，如何保存所有$http请求
【发布时间】：2017-04-14 05:46:53
【问题描述】：

我在 angularjs 中开发了单页应用程序。我已经实现了刷新令牌机制。刷新令牌假设每 30 分钟刷新一次。我正在尝试在拦截器的 responseError 中处理刷新令牌。如果它返回 401 未经授权的错误，我将尝试保留请求。一旦返回 401 错误然后刷新令牌并使用新令牌恢复所有请求，是否有任何机制来保存所有请求。

处理刷新令牌的方法是否正确，这里是示例代码

$provide.factory('httpTokenInterceptor', function ($q, $injector, $cookies) {
return {
    // On request sending
    request: function (config) {
        config.headers = config.headers || {};

        // get this data from $cookies
        var globals = $cookies.getObject('globals') || {};
        //console.log(globals);
        if (globals.authData)
            config.headers.Authorization = 'Bearer ' + globals.authData.access_token;

        return config;
    },

    // On response failure
    responseError: function (rejection) {
        console.log('AuthTokenHttpInterceptor responseError');
        console.log(rejection);
        if (rejection.status === 401) {
            //hold current and all pending request
            var aService = $injector.get('authenticationService');
            aService.getRefreshToken().then(function(response) {

                //need to resume all the request here

                deferred.resolve(response);
            });
            return deferred.promise;
        }
        return $q.reject(rejection);
    }
};
});

【问题讨论】：

标签： javascript angularjs authentication single-page-application angular-promise

【解决方案1】：

简而言之，您不想像这样阻止任何 HTTP 调用。

您的解决方案将在您的一个 HTTP 调用失败后刷新您的令牌。另外，为了清楚起见，即使在获取 HTML 模板等资源的 HTTP 调用中，您的代码也会添加 Authorization 标头。如果你不想这样做，那么你也应该限制它。

对于一种解决方案，请查看此link。它不使用任何特定的库来处理 JWT 令牌，但您必须围绕此实现创建一个包装器，以便在需要进行 HTTP 调用的任何地方使用它。

我的建议（以及处理 JWT 令牌时的个人偏好）是使用 angular-jwt 库。设置非常简单，您可以查看here。

还有更复杂的库，比如auth0，它可以做很多其他的事情，并且可以与angular-jwt 库结合使用。查看此link，了解如何在 HTTP 调用之前和页面刷新时处理令牌刷新。

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用 AngularJS 拦截器保留请求并恢复它们。

authInterceptor.$inject = ['$q', '$rootScope'];
function authInterceptor($q, $rootScope) {
        return {
            request: function(config) {
                var deferred = $q.defer();

                $rootScope.$watch('continue', function(value) {
                    if(value === true)
                        deferred.resolve(config);
                });

                return deferred.promise;
            }
        };
    }

在上面的示例中，所有请求都将保留，直到 $rootScope.continue 变为 true。否则他们将永远等待。

【讨论】：