티스토리 뷰

728x90
반응형

JWT는 Front 단에서 딱히 할 건 없다고 생각했는데......

그래도 막상 해보니 엄청 고생했다..ㅠㅠ 잣같다( 음 egghead.io 동영상 강의를 보면 잣이라 발음함~ )


아래는 미약하게나마 도움이 되었던 예제이다..


http://jasonwatmore.com/post/2016/04/05/angularjs-jwt-authentication-example-tutorial




내가 작업했던 부분인데 핵심 부분만 기재해놨다.. ( Angular 1.5 버전 )

function AuthTokenService($window) {

var store=$window.localStorage;
var key = 'auth-token';

function getToken(){
return store.getItem(key);
}
function setToken(token){
if( token ) {
store.setItem(key, token);
}else{
store.removeItem(key, token);
}
}
return{
getToken:getToken,
setToken:setToken
};
}

angular.module('myApp.auth')
.factory('AuthToken', AuthTokenService);

//EndPoint는 gulp같은 빌드 툴에서 Api 서버 주소를 생성해서 Angular 쪽에 상수로 만들어 준다.

//https://github.com/guzart/gulp-ng-constant 에 해당 설명이 있으니 참고. 키워드는 gulp-ng-constant

function AuthInterceptorService( AuthToken, EndPoint ) {

var BASE_URL=EndPoint.server.apiUrl;
return {
//url request 과정이 일어날때 token값이 있다면 header에 Authorization 정보를 담아 전송.
request: function (config) {
var token = AuthToken.getToken();
if (token) {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + token;
}
return config;
},
response: function (response) {
//console.log('페이지 완료 추적 response=', response.config.url);
return response || $q.when(response);
},
responseError: function (rejection) {

//에러를 체크하는 곳이다.

}
};
}
angular.module('myApp.auth')
.factory('AuthInterceptor', AuthInterceptorService);//factory 로 설정된 것만 interceptors.push 한다.

angular.module('myApp.auth', ['myApp.constants', 'myApp.util', 'ui.router', 'ngCookies'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
});


728x90
반응형

'Programming language > Angularjs(1.x)' 카테고리의 다른 글

Angular style guide  (0) 2017.06.26
gulp-ng-constant 설정  (0) 2017.06.23
angular 의 서비스  (0) 2017.05.22
yeoman angular-fullstack 명령어  (0) 2017.03.10
angular directive  (0) 2017.02.24
댓글