2016-11-01 3 views
1

내 angularjs 응용 프로그램에서 JWT 기반 인증을 구현하려고합니다. 하지만 요청 헤더 문제로 고민하고 있습니다. 것은 내가 서비스를 호출하는 컨트롤러를 가지고 있으며 이것은 토큰을 반환한다는 것입니다. 이 단계는 정상적으로 작동합니다.Angularjs 인증 문제

'use strict'; 

angular.module("home.controllers", ['home.services', 'ngStorage']) 

.controller('HomeController', ['$scope', '$location', '$http', '$localStorage', 'HomeService', 
function($scope, $location, $http, $localStorage, HomeService) { 


    function login(user, password) { 

     HomeService.login(user, password).then(

      function(loginResult) { 
       var token = loginResult.token; 

       if (loged()) { 
        $localStorage.token = token; 
        $http.defaults.headers.common.Authorization = 'Bearer ' + token; 
        console.log($location.path('secure/index')); 
        $location.path('secure/index'); 
       } 
      }, 

      function(err) { 
       console.error(err); 
      } 
     ); 
    } 

    function loged() { 
     return $scope.token !== null; 
    } 

    return { 

     loged: function() { 
      return loged(); 
     }, 

     login: function(user, password)) { 
     return login(user, password) 
    } 
}; 

}]); 

그러나 것은 내가 봄 필터를 확인해야하기 때문에 요청에 "인증"헤더 "/ 색인을 확보"하기 위해 로그인 후 사용자를 리디렉션하려는 것입니다 모든 "*/보안" 경로에는 해당 헤더가 있습니다.

주요 app.js

는 다음

'use strict'; 

angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate', 'ui.bootstrap', 'ngStorage']) 

.config(['$stateProvider', '$translateProvider', '$urlRouterProvider', 
    function($stateProvider, $translateProvider, $urlRouterProvider) { 

     $translateProvider.useUrlLoader("home/mensajes"); 
     $translateProvider.useStorage("UrlLanguageStorage"); 
     $translateProvider.preferredLanguage("en"); 
     $translateProvider.fallbackLanguage("en"); 

     $stateProvider 
      .state("home", { 
       url: "/", 
       templateUrl: "resources/js/home/views/home/home.html", 
       controller: "HomeController" 
      }); 

     $stateProvider 
      .state("contacto", { 
       url: "/contacto", 
       templateUrl: "resources/js/home/views/contact/contac.html", 
       controller: "HomeController" 
      }); 
    } 
]) 

.run(['$localStorage', '$http', function($localStorage, $http) { 

    if ($localStorage.token) { 
     $http.defaults.headers.common.Authorization = 'Bearer ' + $localStorage.token; 
    } 
}]); 

것은이 페이지를 리디렉션 나던입니다. $ location 대신 $ window.href 시도하고 페이지를 성공적으로 리디렉션하지만 요청에 auth 헤더가 없습니다.

아이디어/제안 사항이 있습니까? 저는 Angularjs의 초보자입니다. 아마도 더 많은 것들이 잘못되었을 수 있습니다. 당신이 당신의 토큰을 한 후에는 $location.path('secure/index');secure/index로 리디렉션처럼 사전에

덕분에

답변

1

것 같습니다. 그러나 예제 코드에는 secure/index에 매핑되는 상태가 표시되지 않습니다.

+0

실례합니다. 왜 저에게 그 일을 써야할까요? 내 모듈의 실행? – txomin

+0

성공적으로 로그인하면, 코드는 토큰을 localStorage에 저장합니다 :'$ localStorage.token = token;'. 로컬 저장소는 여러 페이지로드에서 지속됩니다. 실행 블록은 이전 토큰이 있는지 확인하고 사용하고 있습니다. '$ http.defaults.headers.common.Authorization = 'Bearer'+ $ localStorage.token;은 각 HTTP 요청에 대한 인증 헤더를 설정합니다. 이 줄을 사용하면 서버에 보낸 각 요청에 대해 인증 헤더를 수동으로 설정해야합니다. – pgreen2

+0

모두에게 감사합니다 !!! – txomin