Question

我对角度有点新，并且有一个我已经开始的应用程序。这只是一个简单的登录，它将访问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)
  })();

现在让我说这是不 JWT，并且 IS 正在运作。它命中服务器并在验证成功后（来自我的老板的话跟随）** 发回的响应是一个包含字段名称＆＃34; auth_token＆＃34;的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"}

正如您所看到它成功并返回一个带有字段名称＆＃34; auth_token＆＃34;的JSON数组;包含令牌。

我需要做的是希望将该令牌保存到他们的本地存储中，就像我的老板告诉我的那样（他是设计API的人）＆＃34;令牌需要每次都发送回来后续请求和令牌必须作为名为X-PCC-API-TOKEN的自定义请求标头发送＆＃34;

这是我正在经历的教程：

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的自定义头发送回每个后续请求，并希望将令牌保存到本地存储。 / p>

我真的需要帮助。并且我真的不知道如何做到这一点。

由于

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中，您可以在其中检查是否为一个。

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

1 个答案: