$stateChangeStart toState fromState 이동....자료조사

http://miconblog.com/archives/1680

angularjs, ui-router를 이용한 사용자 인증 처리 - just quit your job

위 블로그 글을 정리한것임

 

먼저 앵귤러는 .run() 함수에 인자로 넘긴 콜백함수로부터 시작된다.

이 콜백함수는 페이지가 로드되고 필요한 모듈도 모두 로드되면 호출된다.

 

라우팅은 URL을 변경해 페이지를 이동시키는 것을 이야기하는데 2가지 방법이 있다.

1. 하나는 서버에서 URL을 해석해 이동(redirect)시키는 방법이고
2. 또 다른 하나는 ui-router처럼 클라이언트 딴에서 해쉬URL로 이동시키는 방법이다.

여기서 잠깐, HashUrl이란?

hashUrl은 아래와 같이 url에 샵(#)을 붙여 만든 URL을 의미한다.

http://miconblog.com/#somehash

just quit your job

( 도커 컴포즈로 워드프레스를 이용해 블로그 만들기..사이트)

 

해쉬URL은 HTML 문서 안에 있는 ID로 지정된 엘리먼트를 찾아갈때 쓰인다.

보통 최상위 엘리먼트에 <div id='top'> 같은 값을 주고 Top 버튼을 누르면 스르륵~ 맨위로 올라가게 만든 것도

이런 해쉬를 응용한 방법이다.

 

해쉬의 장점은 문서 안에서 이동하기 때문에 URL이 변경되도 서버를 거치지 않고,

페이지를 변경할수있다는 장점이 있다.

물론 페이지를 변경하려면 hashChanged라는 이벤트를 잘 모니터링하고 있어야한다.

 

ui-router는 URL 상태가 변경되면 $stateChangeStart 라는 이벤트를 발생시켜준다.

이 이벤트는 현재 페이지에서 다른 페이지로 이동하겠다 혹은 이동했다라는 의미이기 때문에

당연히 이벤트의 함께 넘어오는 정보는 이동할 페이지 정보가 되겠다.

 

// app.js
(function(){
  'use strict';

  angular.module('app', [
    'ui.router'
  ])
  .run(function ($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
      // 이동할 페이지에 authenticate 값이 있는지 확인해서 라우팅한다.
      if( toState.authenticate ){
        $state.transitionTo('signin');
        event.preventDefault();
      }

    });
  });

})();

위 코드처럼 URL의 상태가 변경되면 페이지를 이동하기 전에 authenticate 값을 미리 확인하고 원하는 처리를 할수있다.

 

 

 

https://trustyoo86.github.io/angular1/2017/11/11/angular1-auth-operate.html

게으른 개발자 | 게으른 개발자

(Angular1 run module을 이용한 인증 처리 글.)

 

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) {
          }
        });
    });
  });

$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으로 이동하도록 설정되고 있습니다.

 

 

 

아래글은 영어로 번역해서 읽어라. 한국어가 이상하다. 원문이 영어 아니였을까 싶다.

 

http://daplus.net/angularjs-%EA%B0%81%EB%8F%84-ui-%EB%9D%BC%EC%9A%B0%ED%84%B0%EA%B0%80-%EC%9D%B4%EC%A0%84-%EC%83%81%ED%83%9C%EB%A5%BC-%EC%96%BB%EC%8A%B5%EB%8B%88%EB%8B%A4/