Javascript 未经手动刷新，未在angularjs XHR请求中设置附加标头参数

我试图在XHR请求中发送额外的头文件（init和$resource）

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

我正在更改哈希参数（例如，在登录过程之后）以在应用程序中导航。因此，当我在登录过程之后发送任何XHR请求时（无需手动重新加载），它将令牌（请求头）作为NULL发送。但当我手动重新加载页面时，它工作正常（即将令牌作为标题发送）。我还尝试了

$route.reload（）

，但它不起作用

请建议我如何解决这个问题

谢谢

编辑：

尝试以下代码后：

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;

});
})

它停止使用“.run”呈现应用程序中的视图，并在（“$routeChangeError'，上捕获

$rootScope.$，并给出错误错误：[$rootScope:inprog]$摘要已在进行中

您需要设置一个拦截器来更改发送到服务器的每个请求。您可以从文档中找到更多信息，但实际上您需要在应用程序上设置一个factory服务来添加令牌头，如下所示：

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');
});

module.run
在应用程序中的任何其他操作之前（但在
module.config
之后）执行得很好。
localStorage
是否已经设置好了？我想这是以后发生的，这就是为什么重新加载页面后会看到此值的原因

拦截器是最好的选择。
如何在
localStorage
中设置值

因为如果我理解正确，您的用户令牌总是从localstorage获取的，您可以在运行函数中的localstorage密钥上设置一个手表（Demo plunker，用于在angular中使用localstorage:）

这将解决您的问题，而无需任何拦截器等

但是，我建议使用http拦截器，因为对localStorage的调用很慢，或者在登录或注销后实际设置用户令牌的位置设置默认值（也将其保存在范围变量中，并像现在一样在运行部分初始化它）.
谢谢您的回答。请检查问题的编辑部分。我尝试了使用拦截器。使用
$digest的问题已在进行中
似乎与使用
$http
拦截器的问题是分开的。您可以尝试在不使用
.run（）
代码的情况下使用拦截器吗？
angular.module('app',[]).run(['$rootScope', '$http', function($root, $http) {
    $root.$watch(function() {
          return localStorage.getItem('userToken');
    }, function(userToken) {
       $http.defaults.headers.common.token = userToken;
    });
});