게으른 개발자

Angular js앱을 개발하다 보면, 인증 처리에 관련된 부분이 삽입되어야 할 부분들이 있습니다. 예를 들면, 로그인 페이지 외의 다른 페이지에서는 로그인이 되어있지 않는 경우 로그인 페이지로 redirect 시킨다거나 하는 부분들이 필요하게 됩니다.

이러한 부분들을 Angular js에서는 run module을 통해서 각 URL state가 변경될 경우 인증 체크를 할 수 있도록 만들 수 있습니다. 우선 소스부터 보고 설명드려야 할 것 같아서 첨부드립니다.

app
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('login', {
        auth : false,
        url : '/login',
        controller : 'loginCtrl',
        templateUrl : 'login.html'
      })
      .state('common', {
        auth : true,
        url : '/common',
        controller : 'Commonctrl',
        templateUrl : 'common.html'
      });
  
      $urlRouterProvider.otherwise('/login');
  });

소스는 angular app에서 라우팅 처리를 위해서 app.config를 사용하고 있습니다. 사용하는 플러그인은 angular-router이며, angular-router에서의 $stateProvider및 $urlRouterProvder를 사용하고 있습니다.

관련 소스를 보면, login 페이지에서는 auth를 false로, 기타 common 페이지에서는 auth를 true로 설정해놓고 있습니다.

간단하게, authService를 통해서 인증처리를 할 수 있도록 Auth라는 이름의 service를 생성하겠습니다.

app
  .service('Auth', function ($q) {
    var Service = {};
  
    Service.user = null;
  
    Service.setUser = function (user) {
      Service.user = user;
    };
  
    Service.getUser = function () {
      var deferred = $q.defer();
       deferred.resolve(Service.user);
    };
  
    return Service;
  });

Auth라는 service에는 임시로 저장할 Service.user가 있으며, getUser, setUser function을 만들었습니다. setUser는 로그인 후, 로그인 정보를 담을 수 있도록 한 function 이며, getUser는 로그인 후, 인증 정보를 $q의 promise를 통해서 처리하도록 만들었습니다.

다음은 run.js 소스를 보시겠습니다.

app
  .run(function ($rootScope, $state, Auth) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
      Auth.getUser()
        .then(function (user) {
          //should make Auth service
          if (fromState.auth && !toState.auth && user) {
          } else if (toState.auth && !user) {
            $state.go('login');
          } else if (toState.auth && Auth) {
          }
        });
    });
  });

소스를 보시면, 이미 이전에 만들었던 Auth module을 불러오고 있습니다. $rootScope에는 $stateChangeStart를 통해서 URL 변경을 감지할 수 있는 이벤트가 있습니다.

$rootScope.$on('$stateChangeStart')이벤트를 통해서 callback에 관련된 인자를 받아 state 변경시에 처리가 가능한데, 이동하고자 하는 state의 parameter 또는 state 값들과 이동 전의 state 및 parameter 값들을 확인해서 라우팅이 가능합니다.

소스를 보면, URL이 변경되는 이벤트가 발생할때마다 미리 만들어둔 Auth service의 getUser를 통해서 promise를 받아서 처리하도록 되어 있으며, 이전에 생성해 놓은 route.js의 state값 중, auth를 true 또는 false로 처리함으로써, toState에서 auth라는 값을 통해서 인증이 필요한 페이지인지 아닌지를 분기처리 할 수 있습니다.

또한 만약 auth가 true 상태인 경우 Auth service의 인증값이 있느냐 없느냐에 따라서, 없는 경우에는 로그인 정보가 없는 상태이므로 $state.go function을 통해서 login으로 이동하도록 설정되고 있습니다.

간단한 예제이므로, Auth service나 기타 run.js의 $stateChangeStart 이벤트는 각 프로그램의 성격에 맞게 인증 정보 등을 변경하거나, 이를 활용해서 다른 state값으로 페이지 라우팅을 분기 처리할 수 있습니다.

Angular1 run module을 이용한 인증 처리

November 11, 2017