Angular Ui-Router: Wie man den Zugang zu einem Zustand zu verhindern

Question

Hallo Ich bin neu in AngularJS und habe versucht, den Zugriff auf bestimmte Zustände basierend auf Benutzerkriterien zu verhindern.

This, from ui-router's FAQ beschreibt genau das, was ich tun möchte, aber ich kann es nicht richtig funktionieren. Was muss ich aber im Datenobjekt genau dazu tun?

(sah ich jemanden in „true“ auf einigen Blog-Post Tutorial werfen und wie verwenden es, wie ich, aber das scheint nicht, weil ich einen Fehler zu arbeiten, die needAdmin sagt nicht definiert ist) Hier

ist mein Code:

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

    }); 
}]); 

Answer 1

Wenn ein Staat keine data hat, dann ist to.data undefiniert. Versuchen Sie folgendes:

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

Answer 2

Der beste Weg, die ich gefunden habe diese Entschlossenheit verwendet tun:

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

Dies wird einen Fehler auslösen, verhindern, dass der Benutzer den Zugriff auf diesen Zustand, wenn sie nicht erlaubt sind.

Wenn Sie einen Fehler zeigen müssen, oder den Benutzer in einen anderen Zustand senden, behandeln die $ stateChangeError Veranstaltung:

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

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

Wenn Sie Administratorzugriff auf alle Staaten überprüfen möchten, können Sie ein verwenden Dekorator, um die Auflösung zu allen Zuständen hinzuzufügen. Etwas wie dieses:

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

Ich implementierte etwas so für meine gegenwärtige Anwendung. Wenn der Benutzer nicht eingeloggt ist, leiten wir den Benutzer an ein Login-Formular weiter. Wenn ein Benutzer, der kein Administrator ist, versucht, einen Administratorstatus zu erreichen, werden wir zu einer Fehlerseite weitergeleitet.