Block routes according to user permission Angularjs

Question

I have a system where I log in a user, in case everything right the server returns me an object and I store this object in sessionStorage. I can recover this object to do some validations, e.g.: render some components according to user permission.

I would like to block some routes according to the user’s permission, that is, if the user has permissão = 2 he won’t be able to access that route: /usuario

The route configuration is as follows:

angular.module("oraculo").config(function($routeProvider){

    $routeProvider.when("/usuario", {
        templateUrl: "public/views/usuario.html",
        controller: "usuarioCtrl"
    });


    $routeProvider.otherwise({redirectTo: "/login"});

});

Answer 1

Monitor the notification queue for the event $locationChangeStart, and if necessary cancel the event:

$scope.$on('$locationChangeStart', function(event) {
    if (!validaPermissoesUsuario()) {
       event.preventDefault();
    }
});

Or, alternatively, redirect the user:

$scope.$on('$locationChangeStart', function(event) {
    if (!validaPermissoesUsuario()) {
       $location.path( "/naoAutorizado" );
    }
});

Another option is to implement, in the route configuration, a term otherwise interpreting and manipulating the required route:

$routeProvider.otherwise({
    redirectTo: function() {
        //Descreva sua validação de permissões aqui.
        return '/naoAutorizado';
    }
});

However, the way I would recommend it would be by evaluation on the service side. If the logged-in user does not have permissions, please return 401 Unauthorized and configure your view accordingly.