Satellizer和angular.js不在标头中发送令牌 [英] Satellizer and angular.js not sending token in header

问题描述

我正在使用angular.js和satelizer在REST API上进行JWT身份验证。

身份验证正常，页面正在发送3状态。这里是我的状态提供者：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $。$。$。$'$' '/ auth'，
templateUrl：'/views/login.html'，
controller：'AuthController as auth'
}）
.state（'dashboard'，{
url：'/ dashboard'，
templateUrl：'/views/dashboard.html'，
controller：'DashboardController as dash'
}）
.state（' mitglieder'，{
url：'/ mitglieder'，
templateUrl：'/views/mitglieder.html'，
controller：'MitgliederController as mitglieder'
}）
.state（'neuesMitglied'，{
url：'/ neuesMitglied'，
templateUrl：'/views/neuesMitglied.html'，
controller：'NewMitgliederController as newM itglied'
}）
.state（'users'，{
url：'/ users'，
templateUrl：'/views/main.html'，
controller：'UserController as user'
}）;
}）;

但是，在'neuesMitglied'状态内，它突然不再发送授权标题并被拒绝由其余的API。我的NewMitgliederController如下所示：

 （function（）{
 
'use strict'; 
 
 
 .module（'authApp'）
 .controller（'NewMitgliederController'，NewMitgliederController）; 
 
函数NewMitgliederController（$ auth，$ state，$ http，$ rootScope，$ scope）{
 
 var vm = this; 
 
 vm.error; 
 //vm.toAdd; 
 // vm.rawImage; 
 
 //获取数据
 vm.fetchedData; 
 
 var fetchData = function（）{
 
 $ http。 （'APIv1 / Beitragsgruppen / list /'）。 b $ b vm.error =错误; 
}）; 
 
 
} 
 
 
 angular.element（document）.ready（ function（）{
 $（'＃mainNav ul，#mainNav li'）。removeClass（'active'）; 
 $（'＃mitgliederNav'）。addClass（'active'）; 
 fetchData（）; 
 
}）; 
} 
}）（）; 
  

为什么它不在这个控制器内部工作，但是在所有其他控制器中，$ http.get ist working与授权标头？

编辑

我跟踪了一下这个行为，发现有些东西正在移除已由卫星拦截器设置的授权标题（对于该控制器请求，该方法被触发，并且该标题实际上由卫星拦截器添加，但之后它被删除，因此我不知道在哪里，因为我不会触摸任何标题数据或拥有自己的拦截器）...它是一个错误吗？

解决方案

试试这个一：

 （function（）{
 
'use strict'; 
 
 
 .module（'authApp'）
 .controller（'NewMitgliederController'，NewMitgliederController）; 
 
函数NewMitgliederController（$ http，$ scope）{ 
 
 var vm = this; 
 
 vm.error = {}; 
 vm.fetchedData = {}; 
 
 fetchData（）; 
 $ b $ function fetchData（）{
 
 $ http.get（'APIv1 / Beitragsgruppen / list /'）。then（function（res）{
 vm.fetchedData .mitgliedsgruppen = res; 
 $（'＃mainNav ul，#mainNav li'）。removeClass（'active'）; 
 $（'＃mitgliederNav'）。addClass（'active'）; 
}，函数（err）{
 vm.error = err; 
}）; 
} 
} 
}）（）; 
  

I am working with angular.js and satelizer to do JWT Authentication on a REST API.

The authentication works fine and the page is sending the authorization header within 3 states. Here is my state provider:

$stateProvider
            .state('auth', {
                url: '/auth',
                templateUrl: '/views/login.html',
                controller: 'AuthController as auth'
            })
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: '/views/dashboard.html',
                controller: 'DashboardController as dash'
            })
            .state('mitglieder', {
                url: '/mitglieder',
                templateUrl: '/views/mitglieder.html',
                controller: 'MitgliederController as mitglieder'
            })
            .state('neuesMitglied', {
                url: '/neuesMitglied',
                templateUrl: '/views/neuesMitglied.html',
                controller: 'NewMitgliederController as newMitglied'
            })
            .state('users', {
                url: '/users',
                templateUrl: '/views/main.html',
                controller: 'UserController as user'
            });
    });

But however, inside the state 'neuesMitglied' it suddenly does no longer send the authorization header and gets rejected by the rest api. My NewMitgliederController looks like this:

(function() {

'use strict';

angular
    .module('authApp')
    .controller('NewMitgliederController', NewMitgliederController);

function NewMitgliederController($auth, $state, $http, $rootScope, $scope) {

    var vm = this;

    vm.error;
    //vm.toAdd;
    //vm.rawImage;

    //Fetched Data
    vm.fetchedData;

    var fetchData = function() {

        $http.get('APIv1/Beitragsgruppen/list/').success(function (data) {
            vm.fetchedData.mitgliedsgruppen = data;

        }).error(function (error) {
            vm.error = error;
        });


    }


    angular.element(document).ready( function(){
        $('#mainNav ul, #mainNav li').removeClass('active');
        $('#mitgliederNav').addClass('active');
        fetchData();

    } );
  }
})();

Why is it not working inside this controller but in all other controllers, the $http.get ist working with authorization header?

EDIT

I tracked this behavior a little bit and found that something is removing the "Authorization" Header which has been set by the satellizer interceptor (for this controller request the method is fired and this header is really added by satellizer interceptor but it is getting removed afterwards and I dont't know where because I do not touch any header data or have own interceptors)... Is it a bug?

解决方案

Try this one:

(function() {

'use strict';

angular
    .module('authApp')
    .controller('NewMitgliederController', NewMitgliederController);

function NewMitgliederController($http, $scope) {

    var vm = this;

    vm.error = {};
    vm.fetchedData = {};

    fetchData();

    function fetchData() {

        $http.get('APIv1/Beitragsgruppen/list/').then( function(res) {
            vm.fetchedData.mitgliedsgruppen = res;
            $('#mainNav ul, #mainNav li').removeClass('active');
            $('#mitgliederNav').addClass('active');
        }, function(err) {
            vm.error = err;
        });
    }
  }
})();

这篇关于Satellizer和angular.js不在标头中发送令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！