ui-router 인증

ui-router.github.io/ng1/

UI-Router for AngularJS (1.x)

ui-router 는 AngualrJS의 라우팅 모듈입니다.
기본적으로 ng-route를 제공하지만 ui-router가 사실상의 표준이라고 합니다.

AngularJS같은 SPA방식은 브라우저에서 라우팅 처리를 하기때문에 인증처리를 구현할 수 있습니다.

아래는 라우팅 코드 예제입니다.

 

angular
    .module('APP', ['ui.router'])
    .config(function ($stateProvider) {
    	var userAuth = JSON.parse(localStorage.getItem('userKey'));
        
    	$stateProvider.state('mypage', {
            url: '/view/mypage', // 라우팅 경로
            templateUrl: 'mypage.html', // 템플릿 경로
            controller: 'mypage', // 컨트롤러 이름
            resolve: {
                auththenticate: [
                    '$q',
                    function ($q) {
                        if (userAuth === null) {
                            return $q.reject('AUTH_REQUIRED');
                        }
                    },
                ],
            },
        });
    })

 

resolve에서 '$q' 가 promise 객체를 리턴해줍니다.
예제는 로그인을 하면 로컬스토리지에 유저정보를 입력하고 그 정보를 userAuth에 할당해줬습니다.
그리고 userAuth가 null이라면 promise객체에 실패(reject)처리를 보냅니다.

 

.run(function ($transitions) {
	$transitions.onError({}, function (transition) {
            if (transition.error().detail === 'AUTH_REQUIRED') {
                $state.go('main');
            }
     });
});

 

run 함수에서 ui-router의 transition hook을 사용하여 state가 변경될 때 마다 event hook을 반환합니다.(onSuccess, onError...)

hook은 promise를 반환하고 여기서 위에서 입력한 실패값(AUTH_REQUIRED)이 있다면 메인으로 돌려보냅니다.