javascript - 尝试在 stateChangeStart 中添加 token 时无法读取未定义的属性 'defaults'

Question

我的目标是将 token 作为授权 header 发送到我的应用程序中的每个服务调用。

这是我的代码

'use strict';

var properties = {};

angular.module('nbaportalUi', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize',
  'ngResource', 'ui.router', 'ui.bootstrap', 'uiSwitch'])
   .run(['$rootScope', '$state', '$window', '$cookies', function ($rootScope, $state, $window, $cookies, $http) {

       $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {



           $http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;


       });
  }])


  .config( function($stateProvider, $urlRouterProvider, $locationProvider) {

   $urlRouterProvider
      .otherwise('/home');

    // note the 'abstract:true' state below - it can not get activated
    // it is activated implicitly when one of its descendants are activated
    $stateProvider
      .state('app', {
        abstract: true,
        controller: 'MainCtrl',
        templateUrl: 'app/main/main.html'
      })
       .state('app.overview', {
        url: '/overview',
        templateUrl: 'app/overview/summary.html',
        controller: 'OverviewCtrl'
      })
      .state('loginPage', {
        url: '/login',
        templateUrl: 'app/login/login.html',
        controller: 'LoginCtrl'
      })
      .state('errorPage', {
        url: '/error404',
        templateUrl: 'app/404.html'
      });


  })
  .constant('ENV', {
    'name': 'dev',
    'apiEndpoint': 'https://api.blah.com/nba/v1/team/' 
  })
;

我在 $stateChangeStart 中插入 $http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ; 因为它每次都会被调用。

但是，当我尝试这样做时，我收到一条错误消息

angular.js:11706 TypeError: Cannot read property 'defaults' of undefined
    at index.js:43

此错误引用了以下代码行 -> $http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;

但是，当我尝试将 token 添加为 stateChangeStart 外部的授权添加器时，如下所示，它会起作用:

'use strict';

var properties = {};

angular.module('nbaportalUi', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize',
  'ngResource', 'ui.router', 'ui.bootstrap', 'uiSwitch'])
   .run(['$rootScope', '$state', '$window', '$cookies', function ($rootScope, $state, $window, $cookies) {

       $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {






       });
  }])


  .config( function($stateProvider, $urlRouterProvider, $locationProvider) {

     $urlRouterProvider
      .otherwise('/home');

    // note the 'abstract:true' state below - it can not get activated
    // it is activated implicitly when one of its descendants are activated
    $stateProvider
      .state('app', {
        abstract: true,
        controller: 'MainCtrl',
        templateUrl: 'app/main/main.html'
      })
       .state('app.overview', {
        url: '/overview',
        templateUrl: 'app/overview/summary.html',
        controller: 'OverviewCtrl'
      })
      .state('loginPage', {
        url: '/login',
        templateUrl: 'app/login/login.html',
        controller: 'LoginCtrl'
      })
      .state('errorPage', {
        url: '/error404',
        templateUrl: 'app/404.html'
      });


  })
  .constant('ENV', {
    'name': 'dev',
    'apiEndpoint': 'https://api.blah.com/nba/v1/team/' 
  })
;

angular.module('nbaportalUi').run(function($http) {
  $http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;

});

我更愿意让我的第一种方法发挥作用。我很感激我能得到的任何帮助。

Answer 1

您必须包含 $http 服务，如下所示(您忘记放入数组中):

.run(['$rootScope', '$state', '$window', '$cookies','$http', function ($rootScope, $state, $window, $cookies, $http) {