将 auth0 令牌传递给 $http.get（角度）答案

【问题标题】：Passing auth0 token to $http.get (angular)将 auth0 令牌传递给 $http.get（角度）
【发布时间】：2015-04-27 16:36:45
【问题描述】：

在将 auth0 令牌附加到 http.get 请求到期望看到令牌的 api 时遇到一些问题。令牌在用户登录时创建并保存在浏览器的本地存储中。那部分工作正常。因此，它将令牌附加到我遇到问题的 http.get 中。

到目前为止，我有以下代码。在我的 app.js 中，我有以下内容...

var QuoteApp = angular.module('QuoteApp', ['ui.router', 'auth0', 'angular-jwt', 'angular-storage', 'ngCookies']);
priceQuoteApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider, authProvider, $locationProvider, jwtInterceptorProvider) {

jwtInterceptorProvider.tokenGetter = function(store, jwtHelper, auth) {
    var idToken = store.get('token');
    var refreshToken = store.get('refreshToken');
    // If no token return null
    if (!idToken || !refreshToken) {
        return null;
    }        
}
$httpProvider.interceptors.push('jwtInterceptor');

});

然后我有一个 $http.get 函数，我向 API 发送请求，该请求也需要令牌

在我的 api.service.js 文件中，我有这个...

this.getStuff = function (attributes) {
    return $http.get('http://www.theurl.com/api/getstuff?json=' + JSON.stringify(attributes)).
        success(function(){
        });
};

我像这样从我的 getStuff.js 文件中调用 getStuff 函数...

  $scope.getTheStuff = function (){
         Services.getStuff($scope.Attributes)
         .then(function (res) {
         })
    };

所以我从服务器收到一个身份验证错误 - 401（未经授权），这对我来说意味着令牌由于某种原因没有附加到 http.het 请求。任何想法为什么会发生这种情况？

如果有帮助的话，我还包括浏览器控制台的标题...

Remote Address:10.34.51.34:80
Request URL:http://www.theurl.com/api/getstuff?json={stuff in here}]}
Request Method:GET
Status Code:401 Unauthorized
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Host:http://www.theurl.com
Origin:http://localhost:63342
Referer:http://localhost:63342/price-tool-ui-1/app/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
Query String Parametersview sourceview URL encoded
json:{stuff in here}]}
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin:*

【问题讨论】：

您确定这是most minimal 对您的问题的描述吗？
感谢您的回答。我没有意识到这是一个问题。它确实看起来有点长，但我认为我应该尽量提供尽可能多的信息。
没问题。尝试编辑您的帖子 - 如果它符合我链接的帮助中的规则，则有更多机会获得您的答案。
好的，谢谢 - 已编辑

标签： javascript angularjs auth0

【解决方案1】：

您没有返回jwtInterceptorProvider.tokenGetter 中的令牌。来自docs

jwtInterceptorProvider.tokenGetter = function(store, $http, jwtHelper) {
  var idToken = store.get('token');
  var refreshToken = store.get('refreshToken');
  if (jwtHelper.isTokenExpired(idToken)) {
    return auth.refreshIdToken(refreshToken);
  } else {
    return idToken;
  }
}

【讨论】：

【解决方案2】：

您没有返回从 localStorage 获得的令牌。

@eer 响应还不错，不过他还是需要保存新刷新的token，这样你下次就不用再调用那个endpoint了。

代码如下：

var refreshingToken = null;
jwtInterceptorProvider.tokenGetter = function(store, $http, jwtHelper) {
  var token = store.get('token');
  var refreshToken = store.get('refreshToken');
  if (token) {
    if (!jwtHelper.isTokenExpired(token)) {
      return store.get('token');
    } else {
      if (refreshingToken === null) {
        refreshingToken =  auth.refreshIdToken(refreshToken).then(function(idToken) {
          store.set('token', idToken);
          return idToken;
        }).finally(function() {
            refreshingToken = null;
        });
      }
      return refreshingToken;
    }
  }
}

希望对你有帮助！

谢谢！

【讨论】：

【解决方案3】：

不确定我是否正确理解了您的问题。但这是我在身份验证后将 http 请求中的令牌设置到我的 API 的方法：

$http.defaults.headers.common['token'] = token;

标头的名称取决于您的 API 所期望的内容（可能是 X-Auth、Token、X-Token....）。

【讨论】：