javascript - 在没有手动刷新的情况下不在angularjs XHR请求中设置额外的 header 参数

Question

我正在尝试在 XHR 请求中发送额外的 header (使用 $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 请求时，它会将 token(请求 header )作为 NULL 发送。但是当我手动重新加载我的页面时它工作正常(即发送 token 作为标题)。我也尝试过 $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”渲染应用程序中的 View 并陷入 $rootScope.$on('$routeChangeError', 并给出错误 错误:[$rootScope:inprog] $digest 已经在进行中。

Answer 1

因为如果我理解正确的话，你的用户 token 总是从本地存储中获取，你可以在你的运行函数中设置一个本地存储键的监视(Demo plunker for working with Localstorage in angular: 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 的调用慢，或者在登录或注销后实际设置用户 token 的位置设置默认值(也将其保存在范围变量中，并像现在一样在运行部分对其进行初始化)。