Angular JS $locationChangeStart get next url route object

Question

I am trying to implement Authorization on my angular application, when a route is changed I want to check whether the route is authorized for user or not. I tried with $ro

Answer 1

You can also use $location provider to do this like :

.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
     });
    }])`

Answer 2

You can get the route parameter in an $locationChangeStart event listener like this:

$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 classic preventDefault method would do the work. Here's a plunker that I wrote for something similar.

Answer 3

What is contained in next.$$route?

There should be a next.$$route.route_object

Answer 4

    $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');
            } 
        }
    });
}]);