Comment puis-je vérifier pour la connexion ou de toute autre situation avant de lancer un itinéraire Angulaire avec routeProvider?

Disons que j'ai 4 voies - 2 exigent que l'utilisateur soit connecté, 2 ne le sont pas. Mon application init ressemble:

        $routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'});
        $routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'});
        $routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'});
        $routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'});

Routes /open1 et /open2 sont ouverts à tous, tandis que les itinéraires /secure1 et /secure2 exigent que l'utilisateur soit connecté et, si non, prendre des mesures, par exemple de redirection de connexion ou de lancer un avertissement. Je peux déterminer l'utilisateur de l'état à l'aide de mon Auth de service et d'appel, par exemple, Auth.isLogin(). De sorte que le résultat serait:

  • va /open1 et /open2 toujours aller pour le modèle et le contrôleur a déclaré ci-dessus
  • si Auth.isLogin() renvoie true, /secure1 et /secure2 aller au-dessus de l'déclarée modèle et contrôleur de
  • si Auth.isLogin() renvoie la valeur false, /secure1 et /secure2 à prendre d'autres mesures, par exemple $location.path('/login')

Je pourrait mettre de la logique dans la Secure1 et Secure2 contrôleurs qui vérifie, mais c'est répétitif et se mélange les responsabilités, les rend plus difficiles à tester, etc.

Est-il un moyen que je peux utiliser le $routeProvider de déclarer, "vérifier cette voie cette voie, et si non, rediriger"? Je pensais de l'aide resolve en quelque sorte, mais pas tout à fait sûr de la façon de travailler dans (docs sur resolve ne sont pas très claires, et quelques exemples utiles).

EDIT:

sur la base des réponses ci-dessous, il semble qu'il ya trois philosophies pour ce faire:

La 2ème option est ce que les deux answerers l'ont suggéré.

OriginalL'auteur deitch | 2014-11-18

  1. 13

    Comme dans mes commentaires ci-dessus, il y a 3 chemins différents (en plus de la capacité à utiliser une directive si vous souhaitez contrôler à partir de modèles html). J'ai fini par suite de

    https://midgetontoes.com/angularjs-check-user-login/

    qui, essentiellement, est comme suit:

    $routeProvider.when('/secure', {
    templateUrl: '/secure.html', 
    controller: 'Secure',
    resolve:{
        loggedIn:onlyLoggedIn
    }
 });

    Et puis onlyLoggedIn:

    var onlyLoggedIn = function ($location,$q,Auth) {
    var deferred = $q.defer();
    if (Auth.isLogin()) {
        deferred.resolve();
    } else {
        deferred.reject();
        $location.url('/login');
    }
    return deferred.promise;
};

    Simple, fonctionne comme un charme. Si jamais j'ai besoin d'une directive, je vais tirer de cette pièce dans un service.

    Pouvez-vous s'il vous plaît mentionner où mettre var onlyLoggedIn, comme dans l'étendue? Je suis très nouveau pour elle. @deitch
    Je viens de le déclarer comme une variable locale de la fonction dans mon app.js et puis la référence dans mon $routeProvider. Mais il peut être n'importe où vous voulez, puisque vous pouvez toujours require() ou autrement l'inclure.
    Votre url est morte
    l'url n'est pas morte plus, je suis de retour 🙂
    c'est mort encore une fois, prenons donc un wayback machine: web.archive.org/web/20160512034000/https://midgetontoes.com/...

    OriginalL'auteur deitch

  2. 4

    Ce blog traite avec authentification de l'utilisateur dans AngularJS l'aide de directives.

    Le $service de l'itinéraire émet $routeChangeStart avant un changement d'itinéraire.

    Si vous n'utilisez pas de directives, vous pouvez assister à cet événement par l'application appelante.exécuter (vous pouvez le placer après le code qui permet de définir les itinéraires [app.config]). Par exemple:

    Pour la divulgation complète, je utiliser l'interface utilisateur.routeur et c'est un code adapté à partir de $stateChangeStart - je utiliser dans mon application

    var app = angular.module('app');

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'});
    $routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'});
    $routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'});
    $routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'});
}]);

app.run(['$rootScope', '$location', 'Auth', function($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){
        var logged = Auth.isLogin();

        //check if the user is going to the login page
        //i use ui.route so not exactly sure about this one but you get the picture
        var appTo = currRoute.path.indexOf('/secure') !== -1;

        if(appTo && !logged) {
            event.preventDefault();
            $location.path('/login');
        }
    });
}]);
    Donc je peux l'utiliser $routeChangeStart cas de capturer et d'empêcher la poursuite? J'aurais encore besoin de connaître les chemins, et préfèrent le faire dans le $routeProvider.when() si je peux, mais ce serait le travail. Ceci est similaire à @JasonvanderZeeuw réponse ci-dessous. Je vais lire le post de blog, merci
    Je recommande AngularUI routeur, car il utilise des états au lieu de l'url. Par exemple, l'état pourrait être sécurisé.rapport ou sécurisé.liste alors que l'url est /rapport ou /lister, alors vous seulement de vérifier si l'état contient des sécurisé dans le nom, sans en connaître l'exacte des liens
    Je vais vérifier après la lecture de l'article du blog.
    Le blog est intéressant. Plutôt que de le faire sur la route, il suggère la création d'une directive sur le modèle. Pas sûr que j'aime cette approche, je pense que je la préfère à la route (ou l'état), mais l'idée pourrait fonctionner. Je vais l'essayer.

    OriginalL'auteur vjancic

  3. 3

    J'ai eu le même problème et j'ai fait de cette façon:

    var app = angular.module('myModule',["ui-bootstrap"]);

    Et puis écouter un locationchange dans l'application (ce sera également déclencher onEnter de page)

    app.run(function ($rootScope, $location, $cookieStore) {
 $rootScope.$on("$locationChangeStart", function (event, next, current) {
    //Here you can check whatever you want (servercall, cookie...)
 });
}

    J'Espère que cela aide!

    Il n'est pas un mauvais plan, mais puis-je ajouter de la logique par la route dans le gestionnaire d'événements, et comment puis-je arrêter un itinéraire particulier à partir de l'exécution?
    J'ai ajouté " jeter "arrêter l'exécution"; " qui mettra fin à tous les javascript activité. Et fait une redirection vers un loginpage. Dans la fonction que j'ai vérifier si $lieu.chemin d'accès == "/signin";
    Je suppose que cela fonctionnerait. Il n'y a rien à l'intérieur de la $routeProvider qui peut vous aider?
    Non il n'y a rien dans le $routeprovider pour l'authentification, vous pouvez toujours jeter un oeil à un module externe comme github.com/witoldsz/angular-http-auth
    J'ai fini suivant midgetontoes.com/blog/2014/08/31/angularjs-check-user-login utilisation de la résoudre. C'était le plus simple.

    OriginalL'auteur Jason van der Zeeuw