JWT 实现不适用于 angul js

Question

我在我的 Angular js 应用程序上实现了 JWT。我添加了带有所有 http 功能的 jwt 授权密钥。我的代码是：

angular.module('IttadishopServices', [])
    .config(function Config($httpProvider, jwtInterceptorProvider) {
        jwtInterceptorProvider.tokenGetter = function (User) {
            var jwt = localStorage.getItem('id_token');
            if (localStorage.getItem("id_token") === null) {
                User.generateToken().success(function (data) {
                    localStorage.setItem('id_token', data);
                    return data;
                });

            } else {
                return jwt;
            }
        }
        $httpProvider.interceptors.push('jwtInterceptor');

    });

现在的问题是，授权密钥被添加到标题中。但是每个请求都会双重发送到服务器。我尝试以多种方式添加该授权密钥，但每次每个请求都向服务器发送双份，一个请求带有授权密钥，另一个请求没有任何授权密钥。添加了控制台的截图。

Console image for duplicate request

Answer 1

问题是你没有在你的拦截器中返回一个 Promise 并且你在那个拦截器中使用了一个异步函数。因此，将 asynch 函数包装在 $q 中并返回一个 Promise 应该可以解决 2 次发送请求的问题。一次不等待异步函数完成（无密钥），一次当 User.generateToken() 的承诺被解决。包装：

angular.module('IttadishopServices', [])
    .config(function Config($httpProvider, jwtInterceptorProvider) {
        jwtInterceptorProvider.tokenGetter = function (User) {
            var jwt = localStorage.getItem('id_token');
            if (localStorage.getItem("id_token") === null) {
                var deferred = $q.defer();
                User.generateToken().success(function (data) {
                    localStorage.setItem('id_token', data);
                    deferred.resolve(data);
                });
                return deferred.promise;
            } else {
                return jwt;
            }
        }
        $httpProvider.interceptors.push('jwtInterceptor');
    });

但您不应该在配置块中定义该函数，而应在工厂中。

来源： http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/