title: Angular UI Router: 1 Transition authentication, authorization and role based check
body: <p>I am using new ui-router 1.0.3 in my app. I need to implement authentication and authorization in my app. Here is my code </p>
  
  <pre><code>   run(function ($transitions, $state, AuthService) {
      $transitions.onStart({
        to: function (state) {
          return !!(state.data &amp;&amp; state.data.requiredAuth);
        }
      }, function (state) {
        if (!AuthService.isAuthenticated()) {
          return $state.target('auth.login');
        }
      }
      );
      $transitions.onStart({
        to: 'auth.*'
      }, function () {
        if (AuthService.isAuthenticated()) {
          return $state.target('app');
        }
      });
    });
  </code></pre>
  
  <p>Here is my config</p>
  
  <pre><code>  .config(function ($stateProvider,$urlRouterProvider) {
      $stateProvider
      .state('app', {
        redirectTo: 'contacts',
        url: '/app',
        data: {
          requiredAuth: true,
        },
        component: 'app'
      })
      .state('contacts', {
        parent: 'app',
        url: '/contacts?filter',
        component: 'contacts',
        params: {
          filter: {
            value: 'none'
          }
        },
        data :{
          role : ['Admin','Manager'],
          permission : 'read'
        },
        resolve: {
          contacts: function (ContactService) {
            return ContactService.getContactList().$loaded();
          },
          filter: function ($transition$) {
            return $transition$.params();
          }
        }
      })
      .state('contact', {
        parent: 'app',
        url: '/contact/:id',
        component: 'contactEdit',
        data :{
          role : ['Admin','Manager'],
          permission : 'edit'
        },
        resolve: {
          contact: function ($transition$, ContactService) {
            var key = $transition$.params().id;
            return ContactService.getContactById(key).$loaded();
          }
        }
      })
      .state('auth.register', {
        url: '/register',
        component: 'register'
      })
      .state('auth', {
        redirectTo: 'auth.login',
        url: '/auth',
        template: '&lt;div ui-view&gt;&lt;/div&gt;'
      })
      .state('auth.login', {
        url: '/login',
        component: 'login'
      })
      .state('auth.denied',{
        url:'/denied',
        component:'accessDenied'
      });
    $urlRouterProvider.otherwise('/auth/login');
    });
  </code></pre>
  
  <p>Here is the service function</p>
  
  <pre><code>this.isAuthenticated = function () {
      return !!authData;
    };
  </code></pre>
  
  <p>When I Login it handle authentication successfully and sent me to contact state. When I Logout and access directly contact page it stuck on Login page. I need to check state data for roles and permission .</p>
  
  <p>Need help .</p>