2016-07-11 2 views
0

모든 요청시 Authorization 헤더에 Json Web Token을 전달하고 로컬 저장소에 저장합니다. 사용자가 "로그 아웃"을 클릭하면 로컬 저장소의 토큰을 삭제하고 심지어 콘솔에 로그인하여 null로 표시됩니다. 그러나 다음 요청시 Authorization 헤더는 삭제 되더라도 여전히 Json Web Token을 사용합니다. 브라우저에서 새로 고침 버튼을 누르기 전까지는 유효하지 않으며 요청은 업데이트 된 값을 사용하여 시작됩니다. Angular.js로 단일 페이지 응용 프로그램을 제작하고 있습니다. 내가 위의 방법을 사용하여 각 페이지에로컬 저장소에서 삭제 된 Json Web Token을 여전히 사용하는 인증 헤더

angular.module('App.user', []) 
    .factory('User', function($http, $location, $state, $window) { 

    var jwt = localStorage.getItem('jwt'); 

    $http.defaults.headers.common.Authorization = JSON.parse(jwt); 

    var apiUrl = 'http://localhost:8080/api'; 

    return { 


    authUser: function(credentials) { 
     return $http.post(apiUrl + '/authenticate', credentials).then(function(res){ 
      return res.data; 
     }); 
    }, 

    getMe: function() { 
     return $http.get(apiUrl + '/users/me').then(function(res) { 
      return res.data; 
     }); 
    }, 

     logOut: function(){ 
      console.log('Logging user out'); 
      localStorage.removeItem('jwt'); 
      $state.go('home'); 
     } 

    }; 

}); 

:

User.authUser($scope.credentials).then(function(res) { 

     console.log(res); 

     if(res.success === true){ 

       console.log('User is authenticated!'); 
       localStorage.setItem('jwt', JSON.stringify(res.token)); 

     } else { 

     console.log('User is NOT authenticated.'); 
     } 
     }); 

이 내가 로컬 스토리지를 인증 헤더를 설정하고 삭제하고 방법입니다

내가 로컬 스토리지를 설정하고 어떻게 User.getMe()는 사용자가 유효한지 확인합니다. 그래서 문제 중 하나는 사용자가 프로필에 로그인 한 다음 로그 아웃 (저장소를 삭제)하고 홈 페이지로 리디렉션되지만 홈 페이지는 "User.getMe()"를 사용하여 사용자인지 확인합니다. 로그인하고 Authorization 헤더가 여전히 이전 JWT를 사용하고 있기 때문에 사용자가 로그인했다는 메시지가 표시됩니다. 페이지를 수동으로 새로 고칠 때만 작동합니다.

여러 시간 동안 인터넷 검색을했는데 아무 것도 찾을 수 없습니다. 콘솔에 localstorage에서 'jwt'를 기록하면 null이 표시되지만 Chrome 개발자 도구에서 요청을 확인하면 요청에 여전히 이전 json 웹 토큰을 사용하고 있음을 알 수 있습니다.

아마도 캐시 된 페이지가 있다고 생각하여 캐싱을 해제하려고했으나 도움이되지 않았습니다.

도움을 주시면 감사하겠습니다.

답변

1

이유는 이미 $http.defaults.headers에 지정했기 때문입니다.

그 시점에서 저장된 토큰을 제거하거나 변경하면 기본 헤더에 아무런 영향을 미치지 않습니다. 당신은 cofig 블록 내부 app.js의 장소가 필요이

+1

당신은'$ httpProvider.interceptors'에 푸시 된 팩토리를 생성하지 않습니다. $ http 워드 프로세서 – charlietfl

+0

의 "요격기"섹션을 참조하십시오. 또한 어제 당신은 앵글에 대해서 아무것도 알지 못했다고 말했고 내 대답을 찾기 위해 인터넷 검색을했습니다 – charlietfl

+0

미래에 당신은 더 전문적인 수준으로 – charlietfl

-1

주위에 얻을 것입니다 헤더를 설정하는 httpInterceptor를 사용

.

관련 문제