L'accès de la portée ou de service dans l'interface utilisateur du routeur onEnter à la vérification d'accès (auth)

J'ai rencontré un problème similaire aujourd'hui. Passé une journée entière et enfin est venu avec une solution viable autres que celles déjà proposées.

Mon principal objectif est de trouver de manière simple et efficace de manière sélective sécurisation de certaines des pages web spécifiques. La vérification de la sécurité doit être effectué avant le HTML ou à l'un des contrôleurs concernés sont chargés ou appelé. Si la vérification échoue, la page peut être transmis à une autre sans aucun des effets secondaires des autres contrôleurs.

J'ai essayé les autres approches suggérées. Chacun a son propre ensemble de problèmes:

1. À L'Aide De OnEnter:

   • Il n'y a aucun moyen de bloquer l'interface utilisateur du routeur de poursuivre la transition de l'état tout en faisant un appel asynchrone à faire la vérification de la sécurité.

2. À l'aide de $rootScope.$sur('$stateChangeStart'):

   • La gestion des états qui rquire vérification de sécurité sont séparés de l' $stateProvider.de l'état() définitions. Idéalement, j'aurais préféré voir tout sur la définition d'un état défini en un seul endroit. Si ce n'est pas un spectacle, c'est pas l'idéal.
   • Un problème beaucoup plus important, c'est que le $stateChangeStart événement n'est pas appelé pour le chargement initial de la page. Celui-ci est un obstacle de taille.

Ma solution est d'utiliser une résolution de fonction pour définir une promesse qui sera la cause de la vue des contrôleurs à attendre pour le report de la remplir avant qu'ils sont appelés. Cela fonctionne parfaitement pour le blocage de la manette à partir de départ de façon asynchrone.

Voici une ébauche de code que j'ai utilisé:

.config(['$stateProvider', function ($stateProvider) {
    //Handler for Restricting Access to a page using the state.resolve call
    var accessRestrictionHandler = function($q, $rootScope, $state) {
            var deferred = $q.defer();

            //make sure user is logged in
            asyncCheckForLogin(function(status) {
                if (status != "Logged In") {
                    //You may save target page URL in cookie for use after login successful later
                    //To get the relative target URL, it is equal to ("#" + this.url).  
                    //     The "this" here is the current scope for the parent state structure of the resolve call.
                    $state.go("loginPage");
                }
                else    //if logged in, continue to load the controllers.  Controllers should not start till resolve() is called.
                    deferred.resolve();
            }.bind(this));

            return deferred.promise;
        };


    $stateProvider
        .state('userProfile', {
            url: '/userProfile',
            views: {
                'main': {
                    templateUrl: 'userProfile.html',
                    controller: 'userProfileCtrl'
                }
            },

            //SIMPLY add the line below to all states that you want to secure
            resolve: { loginRequired : accessRestrictionHandler } 
        })

        .state(.... some other state)
        .state(.... some other state);

}]);

J'espère que cela aidera certains d'entre vous.

Découvrez ce question et cette exemple à partir de leur page github. Il devrait vous donner quelques indices.

probablement vous dire

.state('securepage', {
        url: "/securepage",
        template: securepage.html,
        //this is how you actually inject things to onEnter property
        onEnter: ['$state','myLoginService',function($state,myLoginService){
             if (!$scope.main.isAuthenticated) $state.go("/login");
             if (!myLoginService.currentUser()) $state.go("/login");`}]
         ....