Comment cacher des modèles avec AngularJS ngView pour des utilisateurs non autorisés?

J'ai une application PHP de base, où la connexion de l'utilisateur est stockée dans la session HTTP. L'application a un modèle principal, par exemple index.html, que l'interrupteur sous-vue à l'aide ngView, comme celui-ciComment cacher des modèles avec AngularJS ngView pour des utilisateurs non autorisés?

<body ng-controller='MainCtrl'> 
    <div ng-view></div> 
</body>

Maintenant, ce modèle principal peut être protégé par des commandes PHP de base, mais je sous-modèles (c.-à- liste d'utilisateurs, ajouter un utilisateur, modifier l'utilisateur, etc.) qui sont des fichiers html simples, inclus de angulaire en fonction de mes paramètres d'itinéraire.

Bien que je puisse vérifier l'authenticité de la requête des services http, un utilisateur peut accéder à l'URL du sous-modèle et y accéder. Comment puis-je empêcher cela?

Source

2012-12-14 brazorf

Voulez-vous simplement cacher les sous-modèles aux utilisateurs non-privilégiés ou essayez-vous de les empêcher de savoir que le modèle existe? –

Les deux choses seraient le meilleur objectif. – brazorf

Je voudrais créer un service comme celui-ci:

app.factory('routeAuths', [ function() { 
    // any path that starts with /template1 will be restricted 
    var routeAuths = [{ 
     path : '/template1.*', 
     access : 'restricted' 
    }]; 
    return { 
    get : function(path) { 
     //you can expand the matching algorithm for wildcards etc. 
     var routeAuth; 
     for (var i = 0; i < routeAuths.length; i += 1) { 
     routeAuth = routeAuths[i]; 
     var routeAuthRegex = new RegExp(routeAuth.path); 
     if (routeAuthRegex.test(path)) { 
      if (routeAuth.access === 'restricted') { 
      return { 
       access : 'restricted', 
       path : path 
      }; 
      } 
     } 
     } 
     // you can also make the default 'restricted' and check only for 'allowed' 
     return { 
     access : 'allowed', 
     path : path 
     }; 
    } 
    }; 
} ]);

Et dans le contrôleur principal/racine écouter $locationChangeStart événements:

app.controller('AppController', ['$scope', '$route', '$routeParams', '$location', 'routeAuths', 
    function(scope, route, routeParams, location, routeAuths) { 
    scope.route = route; 
    scope.routeParams = routeParams; 
    scope.location = location; 

    scope.routeAuth = { 
    }; 

    scope.$on('$locationChangeStart', function(event, newVal, oldVal) { 
     var routeAuth = routeAuths.get(location.path()); 
     if (routeAuth.access === 'restricted') { 
     if (scope.routeAuth.allowed) { 
      event.preventDefault(); 
     } 
     else { 
      //if the browser navigates with a direct url that is restricted 
      //redirect to a default 
      location.url('/main'); 
     } 
     scope.routeAuth.restricted = routeAuth; 
     } 
     else { 
     scope.routeAuth.allowed = routeAuth; 
     scope.routeAuth.restricted = undefined; 
     } 
    }); 

}]);

Demo:

plunker

Références:

MISE À JOUR:

Afin d'éviter complètement l'accès de modèle html il est préférable de faire sur le serveur ainsi.Puisque si vous servez le html d'un dossier statique sur le serveur un utilisateur peut accéder directement au fichier ex: root_url/templates/template1.html contournant ainsi le vérificateur angulaire.

Source

2012-12-17 17:17:48

Cela semble être une bonne solution, mais si l'utilisateur accède à http: //srv/sub-templates-dir/template1.html, il peut quand même charger le modèle. Cette vérification devrait-elle être mise en place côté serveur? – brazorf

L'implémentation vérifie uniquement l'égalité d'un chemin, mais vous pouvez implémenter un système de vérification beaucoup plus complexe. J'ai mis à jour ma réponse. –

@LiviuT. Je veux juste demander comment je serai en mesure de contourner la routeAuth, disons que l'utilisateur vient d'authentifier avec succès qu'il devrait être capable de voir template1. Comment changer le routeaccess de restreint à autorisé? –

Si vous voulez les empêcher d'aller à cette page créer un service: http://docs.angularjs.org/guide/dev_guide.services.creating_services

Ce service peut être injecté par la dépendance à tous vos contrôleurs que vous avez enregistré avec les routeParams.

Dans le service, vous pouvez avoir une fonction qui vérifie si la personne est connectée ou non et ensuite rediriger les (retour à la page de connexion peut-être?) En utilisant http://docs.angularjs.org/api/ng. $ Location # path. Appelez cette fonction dans chacun des contrôleurs comme ceci:

function myController(myServiceChecker){ 
    myServiceChecker.makeSureLoggedIn(); 
}

La fonction makeSureLoggedIn vérifiait ce que l'URL actuelle, ils sont à (en utilisant le location.path de $) et si ce n'est pas un, ils sont autorisés à, rediriger les ramener à une page qu'ils sont autorisés à être.

Je serais intéressé de savoir s'il existe un moyen d'empêcher le lancement de routeParams, mais au moins cela vous permettra de faire ce que vous voulez.

Edit: Voir aussi ma réponse ici, vous pouvez les empêcher de même aller à la page:

AngularJS - Detecting, stalling, and cancelling route changes

Source

2012-12-17 15:59:25

Comment cacher des modèles avec AngularJS ngView pour des utilisateurs non autorisés?

Répondre

Questions connexes