通过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"]。