Не установив дополнительный параметр заголовка в запросе angularjs XHR без Mannual обновления

Question

Я пытаюсь отправить дополнительный заголовок в запросе XHR (инициализации с $ ресурса) Следуя за мой конфиг

var app = angular.module('app',['angularMoment']). 
run(function ($rootScope,$location,$route, $timeout, $http) { 
    var token = localStorage.getItem("userToken"); 
    $http.defaults.headers.common.token = token; 
} 

Я меняю хэш Params (например, после процесса входа в систему) для навигации по приложению. Поэтому, когда я отправляю любой запрос XHR после процесса входа в систему (перезагрузка manhual mannual), он отправляет токен (заголовок запроса) как NULL. Но когда я перезагружаю свою страницу вручную, она работает нормально (т. Е. Отправляет токен в виде заголовка). Также я пробовал с $route.reload(), но он не работает.

Просьба предложить, как я могу избавиться от этой проблемы.

Благодаря

EDIT:

После попытки с follwing кодом:

app.factory('tokenInterceptorService', ['$q', '$location', function ($q, $location) { 

var tokenInterceptor = {}; 

var request = function (config) { 

    config.headers = config.headers || {}; 

    var token = localStorage.getItem("userToken"); 

    config.headers.token = token; 

    return config; 
} 

// if response errors with 401 redirect to lgoin 
var response = function (rejection) { 
    if (rejection.status === 401) { 
     $location.path('/'); 
    } 
    return $q.reject(rejection); 
} 

tokenInterceptor.request = request; 
tokenInterceptor.response = response; 

return tokenInterceptor; 
}]); 

app.config(function ($httpProvider) { 
$httpProvider.interceptors.push('tokenInterceptorService'); 
}); 

app.run(function ($rootScope, $location,$route, $timeout, $http) { 

$rootScope.config = {}; 
$rootScope.config.app_url = $location.url(); 
$rootScope.config.app_path = $location.path(); 
$rootScope.layout = {}; 
$rootScope.layout.loading = false; 


$rootScope.$on('$routeChangeStart', function() { 
    //need to validate 
    console.log($rootScope.isValidated + "app"); 

    //show loading 
    $timeout(function(){ 
     $rootScope.layout.loading = true;   
    }); 
}); 
$rootScope.$on('$routeChangeSuccess', function() { 
    //hide loading 
    $timeout(function(){ 
     $rootScope.layout.loading = false; 
    }, 200); 
}); 
$rootScope.$on('$routeChangeError', function() { 

    alert('Something went wrong. Please refresh.'); 
    $rootScope.layout.loading = false; 

}); 
}) 

Это остановить rendring мнения в применении с ".run" и захвата в $rootScope.$on('$routeChangeError', и давая ошибка Ошибка: [$ rootScope: inprog] $ digest уже выполняется.

Answer 1

Так, если я правильно понимаю ваш маркер пользователя всегда берется из LocalStorage, вы можете установить часы на этом LocalStorage ключ в вашей функции запуска (Demo plunker для работы с LocalStorage в угловой: http://plnkr.co/edit/7hP13JAjPybxkRuMZLZ0?p=preview)

angular.module('app',[]).run(['$rootScope', '$http', function($root, $http) { 
    $root.$watch(function() { 
      return localStorage.getItem('userToken'); 
    }, function(userToken) { 
     $http.defaults.headers.common.token = userToken; 
    }); 
}); 

Это должно решить ваши проблемы без каких-либо перехватчиков и т.д.

Однако я действительно рекомендую использовать HTTP-перехватчик, как звонки на LocalStorage являются slow или установить значения по умолчанию, в которых вы фактически устанавливаете токен пользователя после входа в систему или выхода из системы (сохраните его также в переменной области видимости и инициализируйте его в части выполнения, как сейчас).

Answer 2

Вы должны установить перехватчик, который изменяет каждый запрос отправляется на сервер. Вы можете узнать больше формы Документов here, но по сути вам нужно настроить службу заводской на приложении, чтобы добавить заголовок маркеров следующим образом:

app.factory('tokenInterceptorService', ['$q', '$location', 'localStorage', function ($q, $location, localStorage) { 

    var tokenInterceptor = {}; 

    var request = function (config) { 

     config.headers = config.headers || {}; 

     var token = localStorage.getItem("userToken"); 
     if (token) { 
      config.headers.token = token; 
     } 

     return config; 
    } 

    // if response errors with 401 redirect to lgoin 
    var response = function (rejection) { 
     if (rejection.status === 401) { 
      $location.path('/login'); 
     } 
     return $q.reject(rejection); 
    } 

    tokenInterceptor.request = request; 
    tokenInterceptor.response = response; 

    return tokenInterceptor; 
}]); 

, а затем зарегистрировать его на этапе конфигурации с:

app.config(function ($httpProvider) { 
    $httpProvider.interceptors.push('tokenInterceptorService'); 
}); 

Answer 3

module.run выполняется задолго до того, как что-либо еще в приложении (но после module.config). Были ли установлены localStorage? Я думаю, что это происходит позже, поэтому вы видите это значение после перезагрузки страницы.

Перехватчиком был бы путь. Как вы устанавливаете значение в localStorage?

Fiddle