2015-02-14 11 views
35

Ciao, sono nuovo di angularJS e ho cercato di impedire l'accesso a determinati stati in base ai criteri dell'utente.Ui-router angolare: come impedire l'accesso a uno stato

This, from ui-router's FAQ descrive esattamente cosa voglio fare, ma non riesco a farlo funzionare correttamente. Di cosa ho bisogno ma nell'oggetto dati esattamente per realizzare questo?

(ho visto qualcuno gettando in "vera" su alcuni post sul blog tutorial e usarlo piace come ho, ma quello non sembra funzionare perché ricevo un errore che dice needAdmin non è definito)

Ecco il mio codice:

angular.module('courses').config(['$stateProvider', 
    function($stateProvider) { 
     // Courses state routing 
     $stateProvider. 
     state('listCourses', { 
      url: '/courses', 
      templateUrl: 'modules/courses/views/list-courses.client.view.html' 
     }). 
     state('createCourse', { 
      url: '/courses/create', 
      templateUrl: 'modules/courses/views/create-course.client.view.html', 
      data: { 
       needAdmin: true 
      } 
     }). 
     state('viewCourse', { 
      url: '/courses/:courseId', 
      templateUrl: 'modules/courses/views/view-course.client.view.html' 
     }). 
     state('editCourse', { 
      url: '/courses/:courseId/edit', 
      templateUrl: 'modules/courses/views/edit-course.client.view.html', 
      data: { 
       needAdmin: true 
      } 
     });  

    } 
]); 


angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) { 
    $rootScope.$on('$stateChangeStart', function(e, to) { 

    var auth = Authentication; 

    console.log(auth.user.roles[0]); 
    if (to.data.needAdmin && auth.user.roles[0] !== 'admin') { 
     e.preventDefault(); 
     $state.go('/courses'); 
    } 

    }); 
}]); 
+0

L'interfaccia utente non dovrebbe avere i collegamenti alle pagine in primo luogo, giusto? – cgatian

+0

@cgatian Non so ... Potresti entrare in maggiori dettagli per favore? – spuleri

risposta

10

Se uno stato non ha data, quindi to.data è indefinito. Prova questo:

if (to.data && to.data.needAdmin && auth.user.roles[0] !== 'admin') { 
87

Il modo migliore che ho trovato per fare questo utilizza determinazione:

$stateProvider.   
    state('createCourse', { 
     url: '/courses/create', 
     templateUrl: 'modules/courses/views/create-course.client.view.html', 
     resolve: { 
      security: ['$q', function($q){ 
       if(/*user is not admin*/){ 
        return $q.reject("Not Authorized"); 
       } 
      }] 
     } 
    }); 

questo innescherà un errore, impedendo all'utente di accedere a questo stato, se non sono autorizzati.

Se avete bisogno di mostrare un errore, o inviare l'utente a un altro stato, gestire l'evento $ stateChangeError:

$rootScope.$on('$stateChangeError', function(e, toState, toParams, fromState, fromParams, error){ 

    if(error === "Not Authorized"){ 
     $state.go("notAuthorizedPage"); 
    } 

Se si desidera controllare per l'accesso come amministratore a tutti gli Stati, è possibile utilizzare un decoratore per aggiungere la risoluzione a tutti gli stati. Qualcosa del genere:

$stateProvider.decorator('data', function(state, parent){ 
    var stateData = parent(state); 
    var data = stateData.data || {}; 

    state.resolve = state.resolve || {}; 
    if(data.needAdmin){ 
     state.resolve.security = ['$q', function($q){ 
       if(/*user is not admin*/){ 
        return $q.reject("Not Authorized"); 
       } 
      }]; 
    return stateData; 
}); 

Ho implementato qualcosa di simile per la mia attuale applicazione. Se l'utente non ha effettuato l'accesso, inoltriamo l'utente a un modulo di accesso. Se l'utente non amministratore tenta di colpire qualsiasi stato di amministratore, inoltriamo a una pagina di errore.

+0

in 'risoluzione: { sicurezza: ['$ q', funzione ($ q) { se (/ * utente non è admin * /) { return $ q.reject (" Not Authorized "); } }] } '- come posso ottenere' $ q' –

+0

cosa è '$ q' nella risoluzione? –

+0

promette libreria, usata qui per risolvere o rifiutare quella promessa ... maggiori dettagli: https://docs.angularjs.org/api/ng/service/$q – Marko

Problemi correlati