Reading property resolve from angular $routeProvider error

Question

I am trying to restrict access to some pages within the public directory using Angular routing.

.when('/adminprofile', {
    templateUrl: '../partials/adminprofile.html',
    access: {restricted: true}
  })

I am trying to read what I believe is a property called access which I declared, called access

myApp.run(function ($rootScope, $location, $route, AuthService) {
$rootScope.$on('$routeChangeStart',
  function (event, next, current) {
    AuthService.getUserStatus()
    .then(function(){
      if (next.access.restricted && !AuthService.isLoggedIn()){
        $location.path('/login');
        $route.reload();
      }
    });
});
 });

But what I get is this error:

TypeError: next.access is undefined

How can I read the property or how can i achieve this in a better way?, Thanks

EDIT :

According to suggestion, I have changed the code and it looks as it follows:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
   .when('/', {
    templateUrl: '../partials/home.html',
    resolve: { 
      access: false
    }
  })
  .when('/home', {
    templateUrl: '../partials/home.html',
    resolve: { 
      access: false
    }
  })
  .when('/login', {
    templateUrl: '../partials/login.html',
    controller: 'loginController',
    resolve: { 
      access: false
    }
  })
  .when('/logout', {
    controller: 'logoutController',
    resolve: { 
      access: false
    }
  })
  .when('/register', {
    templateUrl: '../partials/register.html',
    controller: 'registerController',
    resolve: { 
      access: false
    }
  })
  .when('/adminprofile', {
    templateUrl: '../partials/adminprofile.html',
    resolve: { 
      access: true
    }
  })
  .otherwise({
    redirectTo: '/'

  });

});

And I have my run function:

myApp.run(function ($rootScope, $location, $route, AuthService) {
debugger;
$rootScope.$on('$routeChangeStart',
  function (event, next, current) {
    AuthService.getUserStatus()
    .then(function(){
      if (next.resolve.access && !AuthService.isLoggedIn()){
        $location.path('/login');
        $route.reload();
      } else{
        $location.path($route.current.originalPath);
      }
    });
});
});

Now I can see the value of access:

next.resolve.access

but is not displaying anything, I run in debug and can see that actually is going through the $routeChangeStart callback , whyyyyy?? helppppp!

Answer 1

ok fellas, is done, this is the right way to do it:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
   .when('/', {
    templateUrl: '../partials/home.html',
    resolve:  { 
      access: function() {
          return false;
      }
    }
  })
  .when('/home', {
    templateUrl: '../partials/home.html',
    resolve:  { 
      access: function() {
          return false;
      }
    }
  })
  .when('/login', {
    templateUrl: '../partials/login.html',
    controller: 'loginController',
    resolve:  { 
      access: function() {
          return false;
      }
    }
  })
  .when('/logout', {
    controller: 'logoutController',
    resolve:  { 
      access: function() {
          return false;
      }
    }
  })
  .when('/register', {
    templateUrl: '../partials/register.html',
    controller: 'registerController',
    resolve:  { 
      access: function() {
          return false;
      }
    }
  })
  .when('/adminprofile', {
    templateUrl: '../partials/adminprofile.html',
    resolve:  { 
      access: function() {
          return true;
      }
    }
  })
  .otherwise({
    redirectTo: '/'

  });

});

myApp.run(function ($rootScope, $location, $route, AuthService) {
debugger;
$rootScope.$on('$routeChangeStart',
  function (event, next, current) {
    AuthService.getUserStatus()
    .then(function(){
      if (next.resolve.access && !AuthService.isLoggedIn()){
        $location.path('/login');
        $route.reload();
      }
    });
});
});

resolve has to be a function

Resolve will open your route with a resolved variable (that can be injected into controller) as soon as it gets value (instantly or when returned promise will be resolved)

as it was not returning a value, the router seems to be stuck waiting for a value to resolve.