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!

try and inspect "next" or console log it to view its contents... is access even in there? — floor, Oct 16 '17 at 20:26
i was just debugging in chrome and it says undefined when i hover over it — Jhonycage, Oct 16 '17 at 20:28
actually is an Object : params{}, pathParams{}, _proto_: Object — Jhonycage, Oct 16 '17 at 20:30
looking at the documentation ( https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) there doesn't seem to be an access or the option to add custom properties. You will have to think of another way. Maybe add it as a query parameter? Or have it redirect to the same URL with an access query parameter. — floor, Oct 16 '17 at 20:30
I read the docs briefly and I know the property itself does not exist, but I saw few other examples and it seems possible to include some parameters as a "json" kind of thing object, like: > data:{property: value} — Jhonycage, Oct 16 '17 at 20:32
alright this should help: https://stackoverflow.com/questions/17209203/angularjs-protecting-routes-with-angularjs-depending-if-the-user-is-authorized .. What you want is called a protected route. I can give a quick answer but you will have to apply it to your run block. and I wont be able to test. but you want to resolve: { access: function() { return true; }} and grab that value in your run block — floor, Oct 16 '17 at 20:35
Thank you , that is what I need, although I am trying what you said: .when('/home', { templateUrl: '../partials/home.html', resolve: { access: function() { return true; } }) I am getting this: ',' expected — Jhonycage, Oct 16 '17 at 20:46
ok, fixed that, but now is not rendering the template, I will post answer, when sit works again :( — Jhonycage, Oct 16 '17 at 20:56

score 0 · Answer 1 · answered Oct 17 '17 at 01:50

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.

Reading property resolve from angular $routeProvider error

1 Answers1