0
votes

Le routeur angulaire ne navigue pas pour définir l'URL, mais pour vider le chemin de l'URL

Je développe actuellement une application angulaire utilisant sa fonctionnalité de routeur. Tous les itinéraires semblent avoir bien fonctionné jusqu'à ce que j'ai découvert qu'après une connexion réussie, le chemin de l'URL que j'ai défini sur, ce qui est «/ admin» ne sera pas suivi et le routeur par défaut à un «/». Ceci est le code: xxx

edit: (ajouté auth.guard.ts) xxx

Le problème:

  1. Bien qu'un identifiant réussi ait été effectué, le routeur redirigera un utilisateur à une URL vierge au lieu de l'URL définie que j'ai fourni spécifiquement dans le dossier login.ts . < / p>

  2. car il se redirigera vers une URL vide, des éléments du home.component.html s'afficheront également dans mon tableau de bord administratif que je ne veux pas arriver.

    En conclusion, comment puis-je avoir suivi les fonctions suivantes? Est-ce que je fais quelque chose de mal? Merci pour l'aide!


6 commentaires

Que voyez-vous dans votre console de navigateur ( F12 )


@Pieterjan C'est ce qui montre immédiatement dans mon événement de routeur: Navigation Start: NavigationStart (ID: 1, URL: '/')


Quel est votre auth -guard ? De plus, votre routage me semble un peu étrange, vous n'utilisez pas la construction angulaire dans la fonctionnalité de routage ( angular.io/ guide / routeur ) au lieu de window.location.assign ('/ admin') Vous devez utiliser this.router.navigate (["admin '], {Relativeto: this .Route});


Je vais éditer mon message pour ajouter l'AuthGuard! En outre, la raison pour laquelle j'ai utilisé window.location.Assign est de tromper le navigateur en pensant que j'ai déjà redirigé vers la route. Cela est dû à certaines de mes fonctionnalités uniquement en cours de chargement si je rafraîchis la demande.


@Pieterjan aucune idée?


Pouvez-vous partager votre code sur github.com? Créez simplement un repo, git clone [url] , collez vos fichiers à l'intérieur du dossier, git Ajouter. , GIT COMMIT , Git Appuyez sur et partagez l'URL à votre repo.


4 Réponses :


0
votes

Remplacer la fenêtre.Location.Assign ('/ admin')

avec xxx

routeur: routeur Route: activatedRoute

J'espère que c'est ce que vous voulez.


2 commentaires

Pouvez-vous fournir comment vous avez ajouté le routeur au constructeur? Ne peut pas sembler reproduire votre solution.


Injecter le routeur juste comme u faire activéRoute



1
votes

Vous pouvez utiliser routeur code> au lieu de window.location.assign code> pour naviguer dans l'exemple de l'exemple de l'URL différent: P>

import { Router} from '@angular/router';

/* Login Component */

constructor(private router: Router, private authService: AuthService) { }

navigate() {
    if (this.authService.getUserRole() == 'user' || 'agent') {
        this.router.navigateByUrl('/')
    } else if (this.authService.getUserRole() == 'admin') {
        this.router.navigateByUrl('/admin')
    }
}


2 commentaires

J'ai déjà essayé cela avant, mais cela ne naviguait toujours pas à mon itinéraire souhaité, bien que la connexion ait réussi. La raison pour laquelle j'ai utilisé window.Location.Assign consiste à tromper le navigateur et à charger les nouveaux composants que j'ai navigue.


Ceci est le code que vous devriez pouvoir utiliser. Je suis beaucoup sous l'impression que l'URL que vous souhaitez naviguer pour n'existe pas. Normalement, vous recevrez une erreur dans la console de navigateur avec plus d'informations.



0
votes

Êtes-vous sûr de naviguer sur la page d'administration? Votre code semble mal que je pense. XXX

Il devrait être comme ci-dessous, sinon le premier est toujours vrai à cause de || 'Agent' xxx

aussi je préfère === pour la vérification de la valeur et de type.


1 commentaires

Merci d'avoir souligné une de mes erreurs. || Rôle === 'Agent' aurait dû être le bon code. Néanmoins, j'ai trouvé la réponse à mon problème. Je posterai bientôt une réponse!



0
votes

dans mon app.trouting.ts fichier, j'ai observé que, à partir du code ci-dessous, supprimer {utilité: true} entraînerait une vérification correcte de l'URL. Ceci est dû au fait que l'ajout {utilhash: true} ajoute un / # supplémentaire à mon URL entraînant la défaillance d'une URL vierge car elle ne correspond à aucun itinéraire.

Exporter Constt routage: modulewithProviders = routeursmodule.forroot (Apprétimes, {UTILOPTHASH: True, EnableRaCing: True});

Je l'ai modifié à la place de:

Export Constt routage: modulewithProviders = roupmodule.forroot (Appréties);

Remarque: j'ai aussi supprimé EnabletraCing: true juste pour nettoyer mes résultats de la console.


0 commentaires