Javascript 使用angular.js中使用OAuth2创建的令牌管理身份验证

我的信息基于此信息 我有一个带有PHP5（Symfony2）的后端和一个带有（angularJS）的前端。我成功地用后端创建了令牌，但我在angularJS上遇到了一个问题，我必须从URL获取令牌，并将其放入每个请求中，以获得每个示例的客户端列表，这就是我所做的：

控制器：signin.js

'use strict';
  // signin controller
app.controller('SigninFormController', ['$scope','$http', '$state','$localStorage','authorizationInterceptor', function($scope, $http, $state,$localStorage,authorizationInterceptor) {
    $scope.user = {};
    $scope.authError = null;
    $scope.login = function() {
    $scope.authError = null;
      // Try to login
    $http({method: 'POST', url: 'myURL/oauth/v2/token?client_id=clientID&client_secret=clientSecret&grant_type=client_credentials'})
   .success(function(response){
     if (response.data.user) {  
     $scope.errors.splice(0, $scope.errors.length); 
     $scope.msgs.splice(0, $scope.msgs.length);
     $scope.posts = data; // response data 
     var token = this.$window.sessionStorage($scope.posts.access_token);
     console.log(""+token);
     console.log("success");
     $state.go('app.home');}
   })
   .error(function(data, status, headers, config) {
    $scope.authError = 'Email or Password not right';
    console.log("data error ...");
  });

    };

和我的服务：access-services.js

.factory('Security', ['$http', function ($http) {
        var token;
        function login(email, password) {
            return $http.post('/auth/login', {email: email, password: password})
                .then(function (response) {

                    if (response.data.token) {
                        token=response.data.token;
                    }
                });
        }

        function getToken(){
            return token;
        }

        return {
            login:login,
            token:getToken
        }; }])
.factory('authorizationInterceptor', ['Security', function (Security) {
        return {
            request: function (config) {
                var token=Security.getToken();
                config.headers = config.headers || {};
                if (token) {
                    config.headers.Authorization = 'Bearer ' + token;
                }
                return config;} }; }]);

但这是我在控制台中得到的：

---

感谢您的帮助

使用如下令牌拦截器：

app.factory('TokenInterceptor', function($q, $window) {
  return {
    request: function(config) {
      config.headers = config.headers || {};
      if ($window.sessionStorage.token) {
        config.headers['X-Access-Token'] = $window.sessionStorage.token;
        config.headers['X-Key'] = $window.sessionStorage.user;
        config.headers['Content-Type'] = "application/json";
      }
      return config || $q.when(config);
    },

    response: function(response) {
      return response || $q.when(response);
    }
  };
});

然后像这样在app.config中使用它

$httpProvider.interceptors.push('TokenInterceptor');

---

您必须使用令牌拦截器。这可以在应用程序配置阶段完成

yourApp.config(function($httpProvider) {
    $httpProvider.interceptors.push("authorizationInterceptor");
});

我建议您阅读以下系列文章。尽管它们是针对ASP.net MVC编写的，但提出的概念是通用的

---

希望这有帮助

谢谢@Viki和控制器，我应该从控制器调用服务吗？添加$httpProvider.interceptors.push（'TokenInterceptor'）后，您不需要调用任何东西；如果sessionstorage具有令牌，则每个请求都将在头中注入令牌。看看@Chintana Meegamarachchi是如何在$httpProvider中推送拦截器的。抱歉，stackoverflow新手，不习惯此编辑器。感谢Chintana Meegamarachc，我已将这些行添加到我的配置文件中：感谢Chintana Meegamarachc，我已将这些行添加到我的配置文件中：。配置（['$httpProvider'，function（$httpProvider）{$httpProvider.interceptors.push（'TokenInterceptor'）；}）但是我得到了这个错误：未捕获错误：[$injector:unpr]未知提供程序：TokenInterceptorProvider您能将其更改为$httpProvider.interceptors.push（“authorizationInterceptor”）；始终存在相同的问题：（->未捕获错误：[$injector:cdep]找到循环依赖项：$http可能是因为您使用“安全”服务作为侦听器的依赖项，并且侦听器在执行http调用时正在从安全服务调用。最好的做法是创建另一个服务来保存令牌，并将其与“安全”服务和inteceptor一起使用