3

Tenho níveis de permissão para usuários no meu sistema: usuário administrador e usuário básico.

Tenho uma página que apenas usuários administradores podem acessar. Coloquei um ng-if="isAdmin()" no menu para esconder, caso não seja administrador.

Funciona corretamente, mas se por acaso o usuário tentar acessar a página pela URL do navegador, ele está conseguindo acessar a página. Como faço no AngularJS, para não deixar acessar essa página caso o usuário não seja do tipo administrador?

Estou usando ui-router e a versão do Angular é 1.6 :)

Esse é o meu código:

//Rotas
app.config(function($routeProvider) {
$routeProvider.when('/', {
    templateUrl : 'home.html',
})

$routeProvider.when('/appointments', {
    templateUrl : 'views/appointment/appointment.html',
    controller : 'AppointmentController'
})

$routeProvider.when('/patients', {
    templateUrl : 'views/patient/patient.html',
    controller : 'PatientController'
})

$routeProvider.when('/users', {
    templateUrl : 'views/user/user.html',
    controller : 'UserController',

})

$routeProvider.when('/services', {
    templateUrl : 'views/service/service.html',
    controller : 'ServiceController'
})
});

 /* Load para pegar as informações do usuário logado */
$scope.getUserData = function(){
    OdontoService.load('rest/user/getUserData').then(function (data) { 
        $scope.userAuthenticated = data.data;
        localStorage.setItem('permission', $scope.userAuthenticated.permission);
        $scope.isLoading = false;
    },function (error){
        console.log(error);
    });
}

$scope.isAdminUser = function(){
    return localStorage.getItem('permission') == 0;
}

Permissão 0 significa que o usuário é administrador.

4
  • Poste todo codigo
    – novic
    23/08/2017 às 2:43
  • Você tem q por a funçao isAdmin() para ser executar em um interceptador, dessa forma toda vez q executar uma requisão, o intercep verifica se tem permisao ou nao.Posta codigo que a gente ajuda mais. 23/08/2017 às 11:14
  • @VirgilioNovic Alterei a pergunta, com o código do meu projeto. 23/08/2017 às 23:21
  • @MarcosSouza Alterei a pergunta, com o código do meu projeto. 23/08/2017 às 23:21

4 Respostas 4

5

Não use angular para negar acesso a páginas. O usuário pode modificar o Javascript carregado no navegador, mesmo se for ofuscado (i.e.: minificado) e acessar a página de qualquer jeito.

A única forma segura de autorizar um acesso é no servidor, com a sua tecnologia de preferência (PHP, Java, .NET, Javascript sobre Node.js etc.)

0

É importante que seu back-end tenha um módulo de segurança com permissões para reforçar a segurança da sua aplicação. Com o angular, utilizando o ui-router, vc pode reforçar na configuração do "state" da página a ser chamada. Veja abaixo:

.state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeController',
    resolve: {
        deps: function($q, $state) {

            var deferred = $q.defer();
            // Aqui verifica se o usuário é do tipo Administrador, caso sim, o state será resolvido e a página será carregada
            if(isAdmin())
                deferred.resolve();
            else{
                // Caso não, redireciona para a tela de login
                $state.go('login', { reload: true });
                deferred.reject()
            }

            return deferred.promise;
        }
    }
})

Espero ter ajudado.

1
0

Como você está utilizando o ui-router esse verificação pode ser feita toda vez que o estado é alterado($state) você pode adicionar na rota se precisa de login ou não, ou se precisa ser admin para acessar algum recurso da View; Você pode recuperar o valor no controller, mas dai você vai precisar usar o $state.current.data

(function () {
    'use strict';

    angular
        .module('app')
        .run(configRun)
    function configRun($rootScope, $state) {


        $rootScope.$on('$stateChangeStart', function (evt, to, toParams, from, fromParams) {


            if (to.data && to.data.requiresLogin && !$rootScope.user) {
                evt.preventDefault();
                $state.go('home');
            }

            if (toParams.codigo) {
                userService.getUserData()
                    .then(function (data) {
                        $rootScope.user = data;
                    });
            }

        });
    }
})();


(function () {
    'use strict';
    angular.module('app')

        .config(configRouter);
    /** @ngInject */
    function configRouter($stateProvider, $urlRouterProvider, $httpProvider, $ionicConfigProvider) {


        $ionicConfigProvider.views.maxCache(0);
        $httpProvider.interceptors.push('TokenInterceptor');
        $stateProvider

            .state('home', {
                url: "/",
                templateUrl: 'home/home.html',
                controller: 'HomeController',
                controllerAs: 'home',
            })
            .state('panic', {
                url: "/panic/:codigo",
                templateUrl: 'security/panic/panic.html',
                controller: 'PanicController',
                controllerAs: 'panic',
                params: {dataModal: null},

                data: {requiresLogin: true},
            })

            .state('login', {
                url: "/login",
                templateUrl: 'login/login.html',
                controller: 'LoginController',
                controllerAs: 'login',
                data: {teste: true},
            })

            .state('app', {
                url: "/app/:codigo",
                abstract: true,
                views: {

                    '': {
                        templateUrl: 'layout/layout.html',
                        controller: 'AppController'
                    },

                    'sidenav': {
                        templateUrl: 'layout/sidenav/sidenav.html',
                        controller: 'sidenavController',
                        controllerAs: 'sidenav',
                    },
                    'content': {
                        templateUrl: 'layout/content.html'
                    },
                    'footer': {
                        templateUrl: 'layout/footer/footer.html',
                        controller: 'footerController',
                        controllerAs: 'ft'

                    },
                    'security': {
                        templateUrl: 'security/security.html',
                        controller: 'SecurityController',
                        controllerAs: 'security'

                    },
                    'aside': {
                        templateUrl: 'layout/toolbar/toolbar.html',
                        controller: 'toolbarController',
                        controllerAs: 'toolbar',
                    },

                },

                data: {requiresLogin: true}

            })
        
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/');
        $urlRouterProvider.when('', '/home');


    }

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

2
  • Isso é ótimo se os usuários se limitam aos idosos da família, mas na hora que isso cai na mão de um sobrinho seu que saiba usar o console do navegador isso deixa de ser seguro. 23/08/2017 às 14:19
  • @Renan tem coisa que tem que ser tratada no back-end, tem coisa que tem que ser tratado no front-end e tem coisa que tem que ser trado tando no front-end como no back-end. Em momento algum eu falei para ele não tratar as regras de negócios no Backend; mas tem coisa que o front end tem q tratar não tem como fugir, 23/08/2017 às 14:24
0

Crie um interceptador para executar a função admin sempre que houver uma requisição.Poderia ser assim:

//interceptador
angular.module('seuapp').factory('authInterceptor', function($rootScope, $q){
  return{
    //O que colocar aqui será executado na requisição
    //Se fosse setar alguma coisa no header seria feito  no request.
    request: function(){
    //Verifica se tem permissão antes de envia-la
      if(localStorage.getItem('permission') != 0){
        //Se não tiver redireciona para login
        location.assign('/login')
      }
      return console.log("Acesso verificado.");
    },

    response: function(response){
      //Aqui você pode por alguma coisa que seja feita caso a pagina ou api 
      //que você esteja trabalhando retorne alguma coisa, tipo um token etc.
  }
});

//Depois você deve registrar o interceptor na sua aplicação.
angular.module('seuapp').config(function($httpProvider){
  //Aqui faz com que em toda as requições http seja executado o request/response.
  $httpProvider.interceptors.push('authInterceptor');
});

Só uma resalva, esse tipo de autenticação é de nivel zero. Criei uma aplicação que da para ter uma noção sobre outros meio de autênticação.da uma olhada pode ajudar. https://github.com/marcossouzadev/booklist

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .