通过 JavaScript/Angular/Ionic Promise 获取 x-Auth-Token

Question

我有一个问题，不知道如何解决... 我必须通过基于令牌的身份验证来对 IonicApp 中的用户进行身份验证。所以我必须将令牌存储在应用程序中，这应该不是问题...... 问题是：我怎样才能得到令牌？ 这是我的代码：

    // Alle Aufrufe an die REST-Api werden hier durchgeführt
    var httpCall = {
        async : function(method, url, header, params, data) {
//          if (url != 'login') {
//              header['X-Auth-Token'] = userTokenFactory.getUserToken();
//          }
            //console.log(header['X-Auth-Token']);
            var ipurl = "IPURL";
            // $http returns a promise, which has a then function, which also returns a promise
            var promise = $http({
                method : method,
                url : ipurl + url,
                //headers : header,
                params : params,
                data : data,
                config : {
                    timeout : 5000
                }
            }).then(function successCallback(response) {
                //console.log("data:" + response.data);
                //console.log("header:" + response.headers);
                console.log("token:" + response.headers['X-AUTH-TOKEN']);
                //console.log(response.data.token);
                console.log("token" + repsonse.token);
                // TRY TO READ THE X_AUTH_TOKEN HERE !!!!!!!!!!!!
                return response;
            }, function errorCallback(response) {
                return response;
            });
            // Return the promise to the controller
            return promise;
        }
    };
    return httpCall;
});

这是来自服务器的响应图片（来自 Firefox）。如您所见，X-Auth-Token 在那里...... here´s the x-auth-token

感谢您的帮助！

Answer 1

关于在 AngularJS 中处理身份验证的文章有很多。 This article 最适合您的情况。

所以你可以从你的请求中获取令牌，

}).then(function successCallback(response) {
    console.log("data:" + response.data);
    $window.sessionStorage.token = response.data.token;
    return response;
}, function errorCallback(response) {
    return response;
});

现在我们将令牌保存在 sessionStorage 中。这个令牌可以通过至少三种方式与每个请求一起发回

1。在每个请求中设置标头：

`$http({method: 'GET', url: url, headers: {
    'Authorization': 'Bearer ' + $window.sessionStorage.token}
});`

2。设置默认标题

`$http.defaults.headers.common['X-Auth-Token'] = 'Bearer ' + $window.sessionStorage.token;`

3。写Interceptor:

拦截器能够在请求发生之前拦截它们 在将它们移交给服务器之前将其移交给服务器和响应 发起这些请求的应用程序代码

myApp.factory('authInterceptor', function ($rootScope, $q, $window) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.sessionStorage.token) {
        config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
      }
      return config;
    },
    response: function (response) {
      if (response.status === 401) {
        // handle the case where the user is not authenticated
      }
      return response || $q.when(response);
    }
  };
});

myApp.config(function ($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

详细解释请参考AngularJS$http guide。

当您得到 response.data null 并且图像表明正在返回标头时，我建议您检查是否正在获取数据

response.headers(),

如果然后尝试使用response.headers()["X_AUTH_TOKEN"]。