i'am using AngularJS with ui-router, this is my current app.js configuration.

'use strict';

angular.module('nodeserverApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'partials/user/main',
        controller: 'MainCtrl'
    })
    .state('dashboard', {
        url: '/user/dashboard',
        templateUrl: 'partials/user/dashboard/main',
        controller: 'UserDashboardDashboardCtrl',
        authenticate: true
    })
    .state('dashboard.welcome', {
        url: '/welcome',
        parent: 'dashboard',
        templateUrl: 'partials/user/dashboard/welcome'
    })
    .state('dashboard.account', {
        url: '/account',
        templateUrl: 'partials/user/dashboard/account',
        controller: 'UserDashboardAccountCtrl'
    })
    .state('dashboard.address', {
        url: '/address',
        templateUrl: 'partials/user/dashboard/address/index'

    })
    .state('dashboard.address.view', {
        url: '/view',
        templateUrl: 'partials/user/dashboard/address/view',
        controller: 'UserDashboardAddressViewCtrl'

    })
    .state('dashboard.address.new', {
        url: '/new',
        templateUrl: 'partials/user/dashboard/address/new',
        controller: 'UserDashboardAddressNewCtrl'

    })
    .state('login', {
        url: '/user/login',
        templateUrl: 'partials/user/login',
        controller: 'LoginCtrl'
    })
    .state('signup', {
        url: '/user/signup',
        templateUrl: 'partials/user/signup',
        controller: 'SignupCtrl'
    })
    .state('settings', {
        url: '/user/settings',
        templateUrl: 'partials/user/settings',
        controller: 'SettingsCtrl',
        authenticate: true
    });

$urlRouterProvider.otherwise("/");

$locationProvider.html5Mode(true);

// Intercept 401s and 403s and redirect you to login
$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
  return {
    'responseError': function(response) {
      if(response.status === 401 || response.status === 403) {
        $location.path('/user/login');
        return $q.reject(response);
      }
      else {
        return $q.reject(response);
      }
    }
  };
}]);
})
.run(function ($rootScope, $state, Auth) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.authenticate && !Auth.isLoggedIn()){
            // User isn’t authenticated
            $state.transitionTo("login");
            event.preventDefault();
        }
    });
});

as you can see, dashboard requires authentication, how can i make it's children inherit the authenticate like dashboard.welcome , dashboard.address.view etc. with out the need to specify each one?

i'am using AngularJS with ui-router, this is my current app.js configuration.

'use strict';

angular.module('nodeserverApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'partials/user/main',
        controller: 'MainCtrl'
    })
    .state('dashboard', {
        url: '/user/dashboard',
        templateUrl: 'partials/user/dashboard/main',
        controller: 'UserDashboardDashboardCtrl',
        authenticate: true
    })
    .state('dashboard.welcome', {
        url: '/welcome',
        parent: 'dashboard',
        templateUrl: 'partials/user/dashboard/welcome'
    })
    .state('dashboard.account', {
        url: '/account',
        templateUrl: 'partials/user/dashboard/account',
        controller: 'UserDashboardAccountCtrl'
    })
    .state('dashboard.address', {
        url: '/address',
        templateUrl: 'partials/user/dashboard/address/index'

    })
    .state('dashboard.address.view', {
        url: '/view',
        templateUrl: 'partials/user/dashboard/address/view',
        controller: 'UserDashboardAddressViewCtrl'

    })
    .state('dashboard.address.new', {
        url: '/new',
        templateUrl: 'partials/user/dashboard/address/new',
        controller: 'UserDashboardAddressNewCtrl'

    })
    .state('login', {
        url: '/user/login',
        templateUrl: 'partials/user/login',
        controller: 'LoginCtrl'
    })
    .state('signup', {
        url: '/user/signup',
        templateUrl: 'partials/user/signup',
        controller: 'SignupCtrl'
    })
    .state('settings', {
        url: '/user/settings',
        templateUrl: 'partials/user/settings',
        controller: 'SettingsCtrl',
        authenticate: true
    });

$urlRouterProvider.otherwise("/");

$locationProvider.html5Mode(true);

// Intercept 401s and 403s and redirect you to login
$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
  return {
    'responseError': function(response) {
      if(response.status === 401 || response.status === 403) {
        $location.path('/user/login');
        return $q.reject(response);
      }
      else {
        return $q.reject(response);
      }
    }
  };
}]);
})
.run(function ($rootScope, $state, Auth) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.authenticate && !Auth.isLoggedIn()){
            // User isn’t authenticated
            $state.transitionTo("login");
            event.preventDefault();
        }
    });
});

as you can see, dashboard requires authentication, how can i make it's children inherit the authenticate like dashboard.welcome , dashboard.address.view etc. with out the need to specify each one?

• javascript
• angularjs
• angular-ui
• angular-ui-router

• Can you provide more information about how you are doing the authentication? – Bradley Trager Commented Mar 19, 2014 at 18:36

2 Answers 2

I know this is pretty old, but for future Googlers, note that the data property is inherited by child states, so you can place something like this authenticate flag in the parent. These modifications to your should do the trick:

For $stateProvider:

.state('dashboard', {
    url: '/user/dashboard',
    templateUrl: 'partials/user/dashboard/main',
    controller: 'UserDashboardDashboardCtrl',
    data: {
        authenticate: true
    }
})

For angular.module:

.run(function ($rootScope, $state, Auth) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.data.authenticate && !Auth.isLoggedIn()){
            // User isn’t authenticated
            $state.transitionTo("login");
            event.preventDefault();
        }
    });
});

I hope this link will help, this is a great article from Frederik Nakstad about the Single Page Auth for AngularJS, sorry but not able to provide you the detail codes

http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/