AngularJs with ui.router how to set authenticate for its children

Question

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?

Can you provide more information about how you are doing the authentication? — Bradley Trager, Mar 19 '14 at 18:36

score 20 · Accepted Answer · answered Aug 18 '14 at 23:57

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

Please note `toState.data.authenticate` may throw a null pointer if your state isn't set up properly, using a checkNested method would be beneficial here: http://stackoverflow.com/questions/2631001/javascript-test-for-existence-of-nested-object-key — jlewkovich, Apr 04 '16 at 21:20

score 2 · Answer 2 · answered Mar 20 '14 at 02:52

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/

AngularJs with ui.router how to set authenticate for its children

2 Answers2