CODEWITHSUNDEEP
angularjsangular-ui-router
Kcharle
Kcharle

Reputation: 1

Restrict access to route with routeprovider unless variable as been set

I'm in the process of learning AngularJS, working on a more in-depth ToDo app. I'm having an issue with trying to limit access to a url or "route" using angular.

When you hit my dev url on my machine (todo.ang) it brings you to todo.ang/#/home, on this view you see the categories which have todos associated to each. EG (category = cat, cat has a todo of "feed", and "play"), when you click a category I'm calling the $scope.goToCategory function (seen in my JS fiddle) which sets a variable for my firebase ref then redirects you too /#/todo. This is working correctly.

My problem is, I don't want the user to be able to access /#/todo if the todoRef variable is still undefined. But it seems like even after $scope.goToCategory is called and todoRef is set to a firebase URL, the routerprovider never gets recalled to know that todoRef has been set to a different value so it always forces you back to /#/home.

code:

var todoRef = undefined; 

if (todoRef !== undefined) {
   $routeProvider.when('/todo', {
   templateUrl: 'views/todo.html',
   controller: 'TodoCtrl'
   });
}

$scope.goToCategory = function(catId) {
   test = catId;
   todoRef = new Firebase("URL HERE");
   $location.path('/todo');
}

I didn't include the entire file of code but if thats necessary, I can do that as well.

JSFiddle

Upvotes: 0

Views: 1188

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32367

All routes are only being set during the config phase. what happens in your code is that 'todo' route is ignored during the initiation of ngRoute.

What you should do is to setup the route but have a resolve like so:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/todo', {
    templateUrl: 'views/todo.html',
    controller: 'TodoCtrl',
    resolve: {
      todoRef: ['$q', function($q) {
        return todoRef ? todoRef : $q.reject('no ref');
      }]
    }
  });
}]);

If 'todoRef' is undefined the route is rejected.

Also you should consider moving 'todoRef' into a service and not on global scope.

You can also listen for route errors and for example redirect to home route:

app.run(['$rootScope', '$location', function($rootScope, $location) {
  $rootScope.$on('$routeChangeError', function() {
    $location.path('/home');
  });
}]);

Upvotes: 1

Related Questions