Angular JS $ locationChangeStart get the following URL route object

Question

I am trying to implement authorization in an angular application when changing a route. I want to check if the route is allowed for the user or not. I tried with $routeChangeStart , but this does not interfere with the event.

My current code is:

 $scope.$on('$routeChangeStart', function(event, next, current) { if(current_user.is_logged_in){ var route_object = next.route_object; if(!(route_object.route_roles)){ event.preventDefault(); } } }); 

Here, in my next object, I get a route_object that is set in my $routeProvider

 var routes = object; app.config(function($routeProvider) { $routeProvider.when(url, { templateUrl: "/users.html", route_object: routes, }); }); 

routes is an object that is formed in my function, but when I use $locationChangeStart , I just get the URL of the next and previous page,

How to get the whole route object?

Answer 1

You can get the route parameter in the $locationChangeStart event listener as follows:

 $scope.$on('$locationChangeStart', function(event, next, current) { if(current_user.is_logged_in){ var route_object = ($route.routes[$location.path()]).route_object; //This is how you get it if(!(route_object.route_roles)){ event.preventDefault(); } } }); 

Then the classic preventDefault method will do the job. Here is the plunker that I wrote for something like that.

Answer 2

  $routeProvider .when('/', { title: 'Home', templateUrl: 'partials/home', controller: 'HomeController', access: { isFree: true } }) .when('/about-us', { title: 'About us', templateUrl: 'partials/aboutus', controller: 'AboutUsController', access: { isFree: true } }) .when('/how-it-works', { title: 'How It Works', templateUrl: 'partials/howitworks', controller: 'HowItWorksController', access: { isFree: true } }) .when('/login', { templateUrl: 'users/login', controller: 'LoginController', access: { isFree: true } }) .when('/logout', { controller: 'LogoutController', access: { isFree: false } }) .when('/sign-up', { templateUrl: 'users/signup', controller: 'SignUpController', access: { isFree: true } }) .otherwise({ redirectTo: '/' }); }) .run(['$rootScope', '$location','$log','$window','Auth' ,function($rootScope, $location, $log, $window, Auth) { $rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){ $rootScope.title = ''; if(currRoute.$$route.title !== undefined){ $rootScope.title = currRoute.$$route.title ; } // $rootScope.userLoggedIn = {name : 'Hi, '+ 'Amar'} let checkIsLoggedInForRoute = ['/login','/sign-up']; let isFreeAccess = currRoute.$$route.access.isFree; let isLoggedIn = Auth.isLogin(); if(isFreeAccess){ if(checkIsLoggedInForRoute.indexOf($location.path()) !== -1 && isLoggedIn){ event.preventDefault(); $location.path('/') } }else if(!isFreeAccess){ let isLogoutRoute = currRoute.$$route.originalPath.indexOf('/logout') !== -1; if(isLogoutRoute && isLoggedIn){ Auth.logout(); $location.path('/'); }else if(isLogoutRoute && !isLoggedIn){ $location.path('/login'); } } }); }]); 

Answer 3

What is contained in the following. $$ route?

Must be next. $$ route.route_object

Answer 4

You can also use $ location provider for this, for example:

 .run(['$rootScope','$location',function($rootScope,$location){ $rootScope.$on('$routeChangeStart', function(event,next, current) { console.log('next',next); console.log('location',$location.path()); console.log('location',$location.search()); // for route params }); }])`