基于AngularJS令牌的身份验证标头

Question

我对angular有点陌生，并且已经启动了一个应用程序。 此操作的开始只是一个简单的登录，它将登录REST API并验证用户身份并发送回一个验证用户的JSON令牌。 随后进行的每个请求都将发送一个包含令牌的身份验证头，以确保它们已被登录。

到目前为止，这是我的代码-

AngularJS：

;(function(){

function authInterceptor(API, auth) {
  return {
    request: function(config) {
      return config;
    }
  }
}


function authService() {

}


function userService($http, API, auth) {

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;';
    $http.defaults.transformRequest = [function(data) {
        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
      }];

  var self = this;

  self.login = function(username, pwd, ctrl) {
      ctrl.requestdata = API + '/winauth' + '; with ' + username;
    return $http.post(API + '/winauth', {
        username: username,
        pwd: pwd
      })
  };

  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

}


  function MainCtrl(user, auth) {
    var self = this;

    function handleRequest(res) {
      self.responsedata = res;
      self.message = res.data.message;
    }

    self.login = function() {
      this.requestdata = 'Starting request...';
      user.login(self.username, self.pwd, self)
        .then(handleRequest, handleRequest)
    }
  }

  angular.module('app', [])
  .factory('authInterceptor', authInterceptor)
  .service('user', userService)
  .service('auth', authService)
  .constant('API', 'http://development-server.com:8080/ecar/api')
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
  })
  .controller('Main', MainCtrl)
  })();

现在让我说，这是不智威汤逊并认为这是工作。 它到达服务器，并且身份验证成功后（跟随我老板的话）** 发送回的响应是一个包含字段名称“ auth_token”的JSON数组，其中包含要与后续请求一起发送回的令牌。 该令牌必须与任何后续请求一起作为名为X-PCC-API-TOKEN的自定义请求标头发送。 **

这是服务器返回的响应：

    http://appsdev.pccportal.com:8080/ecar/api/winauth; with  myUsername
      {"data":{"status":"Authentication has succeeded.","auth_token":"qidn0pwcuvl4jbml73qls94hk4"},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"http://development-server.com:8080/ecar/api/winauth","data":{"username":"myUsername","pwd":"myPassword"},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/x-www-form-urlencoded;"}},"statusText":"OK"}

如您所见，它正在成功执行并返回一个字段名称为“ auth_token”的JSON数组，其中包含令牌。

我需要做的是希望将令牌保存到本地存储中，就像我的老板对我说（他是设计API的那个人）所说的那样： “令牌需要与所有后续请求一起发送回去，令牌必须以名为X-PCC-API-TOKEN的自定义请求标头”

这是我正在经历的教程中：

function authService($window) {
  var self = this;

  self.parseJwt = function(token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace('-', '+').replace('_', '/');
    return JSON.parse($window.atob(base64));
  }

  self.saveToken = function(token) {
    $window.localStorage['jwtToken'] = token;
  }

  self.getToken = function() {
    return $window.localStorage['jwtToken'];
  }

  self.isAuthed = function() {
    var token = self.getToken();
    if(token) {
      var params = self.parseJwt(token);
      return Math.round(new Date().getTime() / 1000) <= params.exp;
    } else {
      return false;
    }
  }

  self.logout = function() {
    $window.localStorage.removeItem('jwtToken');
  }
}

对于拦截器：

function authInterceptor(API, auth) {
  return {

    request: function(config) {
      var token = auth.getToken();
      if(token && config.url.indexOf(API) === 0) {
        config.headers.Authorization = 'Bearer ' + token;
      }

      return config;
    }
  }

}

但这显然是JWT的。 我需要它以符合我的老板指南，并且不使用JWT。

非常抱歉所有代码。 我希望这不是一件坏事。 但是，要封装好此身份验证，然后将包含令牌的JSON数组作为每个X-PCC-API-TOKEN的自定义标头发送回去，并随以下每个请求发送回去，并希望将令牌保存到其本地存储中。

我真的需要帮助。 而且真的不知道该怎么做。

谢谢

Answer 1

基本上，您的登录方法有些起作用。 您点击API服务器，并获得带有令牌的响应。 到现在为止还挺好。 您只需要将令牌保存在localStorage中，并将其添加到每个API调用的X-PCC-API-TOKEN标头中即可。

您可以创建另一个处理存储的服务，但是如果您不需要/不需要这种复杂性，则可以添加

var authToken = res.data.auth_token;
localStorage.setItem('token', authToken);

无论您在哪里处理登录返回的数据-在您的情况下，它都是您的handleRequest函数。

之后，您只需要添加拦截器即可。 您使用JWT的示例确实接近您的实际需求。 （JWT只是设置Authorization标头，而不是您需要的标头。）

function authInterceptor() {
    return {
        request: function (request) {
            request.headers = request.headers || {};
            request.headers['X-PCC-API-TOKEN'] = localStorage.getItem('token');
            return request;
        }
    };
}

显然，如果您使用服务来处理存储，则可以通过该服务获取令牌。 另外，您应该只将自定义标头添加到您的API调用中，因此， if要检查是否为自定义标头，则只需将其简单地放入。