spuleri spuleri - 5 months ago 37x
AngularJS Question

Angular ui-router: how to prevent access to a state

Hello I'm new to angularJS and have been trying to prevent access to certain states based on user critera.

This, from ui-router's FAQ describes exactly what I want to do, but I cant get it to work properly. What do I need to but in the data object exactly to accomplish this?

(I saw someone throwing in "true" on some blog post tutorial and using it like how I have, but that doesnt seem to work because I get an error that says needAdmin is not defined)

Here is my code:

function($stateProvider) {
// Courses state routing
state('listCourses', {
url: '/courses',
templateUrl: 'modules/courses/views/list-courses.client.view.html'
state('createCourse', {
url: '/courses/create',
templateUrl: 'modules/courses/views/create-course.client.view.html',
data: {
needAdmin: true
state('viewCourse', {
url: '/courses/:courseId',
templateUrl: 'modules/courses/views/view-course.client.view.html'
state('editCourse', {
url: '/courses/:courseId/edit',
templateUrl: 'modules/courses/views/edit-course.client.view.html',
data: {
needAdmin: true


angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) {
$rootScope.$on('$stateChangeStart', function(e, to) {

var auth = Authentication;

if (to.data.needAdmin && auth.user.roles[0] !== 'admin') {



If a state has no data, then to.data is undefined. Try this:

if (to.data && to.data.needAdmin && auth.user.roles[0] !== 'admin') {