web-dev-qa-db-fra.com

URL de $ routeChangeStart paramètres de route dans les routes angularjs

Comment serait-il possible d’obtenir le fragment de hachage URL à partir des paramètres de route dans $routeChangeStart. 

$scope.$on('$routeChangeStart', function (event, next, current) {
  // trying to get the url hash fragment from <next> param here
  // e.g. to_url_function(next) -> '/my_path/1'
});

Recevoir le fragment URL hash serait facile avec $locationChangeStart mais ce n'est pas une option pour moi.

angularjsangularjs-routing
7
dasboe

dasboe: Je pense que je réponds à votre question. 

J'ai une application avec un contrôle d'authentification/autorisation dans le gestionnaire d'événements $ routeChangeStart. Si non authentifié, je présente l'utilisateur avec la page de connexion modale. Je veux une connexion réussie pour les envoyer à leur destination d'origine (Beauty of $ routeChangeStart signifie qu'il sera exécuté à nouveau et vérifiera l'autorisation après la connexion réussie). Je sauvegarde le chemin construit à partir de la prochaine dans un service de session utilisateur qui est injecté dans le contrôleur de connexion modal. 

voici le gestionnaire d'événement

//before each route change, check if the user is logged in
//and authorized to move onto the next route
$rootScope.$on('$routeChangeStart', function (event, next, prev) {
    if (next !== undefined) {
        if ('data' in next) {
            if ('authorizedRoles' in next.data) {
                var authorizedRoles = next.data.authorizedRoles;
                if (!SessionService.isAuthorized(authorizedRoles)) {
                    event.preventDefault();
                    SessionService.setRedirectOnLogin(BuildPathFromRoute(next));
                    if (SessionService.isLoggedIn()) {
                        // user is not allowed
                        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
                    } else {
                        // user is not logged in
                        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
                    }
                }   
            }
        }
    }
});

Voici la fonction qui construit le chemin à partir du prochain objet 

function BuildPathFromRoute(routeObj)
{
    var path = routeObj.$$route.originalPath;
    for (var property in routeObj.pathParams)
    {
        if (routeObj.pathParams.hasOwnProperty(property))
        {
            var regEx = new RegExp(":" + property, "gi");
            path = path.replace(regEx, routeObj.pathParams[property].toString());
        }
    }
    return path;
}

Notes:

  • Je ne suis pas passionné par mon utilisation de la route $ $$, mais je ne pouvais pas trouver un autre moyen de le faire. Peut-être que j'ai raté quelque chose de plus facile. J'invite peut-être des problèmes à long terme.
  • PreventDefault () ne fonctionnera pas sur les versions d'AngularJS antérieures à la version 1.3.7 (voir event.preventDefault () ne fonctionne pas pour routeChangeStart dans l'application angularjs ).
  • Mise en garde standard: tout cela est du côté du client et sujet à des abus. Assurez-vous que l'authentification/autorisation a lieu côté serveur.
  • Le prochain objet Route (du gestionnaire d'événements) a également une propriété params. Je ne sais pas si je devrais analyser ses propriétés comme je le fais avec pathParams.
6
MikeSullivan

Si vous ne souhaitez pas utiliser hasOwnProperty, vous pouvez utiliser le $$route.keys pour obtenir les noms des noms de champs pathParams:

function getPathFromRoute(routeObj)
{
    var path = routeObj.$$route.originalPath;
    var keys = routeObj.$$route.keys;
    var value;       
    for (var i = 0; i < keys.length; i++) {
        if(angular.isDefined(keys[i]) && angular.isDefined(keys[i].name)){
            value = routeObj.pathParams[keys[i].name];
            var regEx = new RegExp(":" + keys[i].name, "gi");
            path = path.replace(regEx, value.toString());            
        }
    }     
    return path;
};
0
med

N'utilisez pas de champs d'objet avec le préfixe $$ comme dans les réponses précédentes, car c'est un préfixe utilisé par AngularJS pour les propriétés privées. Utilisez cette méthode pour obtenir l’URL de la route (non testé):

    var buildPathFromRoute = function (route) {
    // get original route path
    var path = route.originalPath;
    // get params keys
    var keysLength = route.keys.length;
    for (var i=0; i<keysLength; i+=1) {
        var param = route.keys[i];

        // optional params postfix is '?'
        var postfix = param.optional ? '\\?' : '';

        var replaceString = ':' + param.name + postfix;
        var regex = new RegExp(replaceString, 'g');
        var paramValue = route.params[param.name].toString();

        // replace param with value
        path = path.replace(regex, paramValue);
    }

    path = path.replace(/\:\S+?\??/g, '');
    return path;
};
0
Daniil