web-dev-qa-db-fra.com

Limiter les changements d'état de l'historique pour empêcher le navigateur de s'arrêter

C'est une question angulaire pour débutant.

Mon application angulaire comprend plusieurs modules de fonction. J'ai utilisé authguard en générant une protection à partir de angular-cli, puis j'utilise CanActivate dans mon module de routage d'application de la manière suivante:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
{path:'login',loadChildren:'./login/login.module#LoginModule',canActivate: 
[AuthGuard]},
{path:'home', loadChildren:'./user/user.module#UserModule',canActivate: 
[AuthGuard]},
{path:'cart', 
loadChildren:'./cart/cart.module#CartModule',canActivate:[AuthGuard]},
 {path:'customer',loadChildren:'./customer/customer.module#CustomerModule',canActivate:[AuthGuard]}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Dans ma garde d'authentification, j'ai écrit la condition empêchant l'utilisateur d'accéder aux itinéraires non autorisés:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
{
  if(["user","customer","cart"].indexOf(localStorage.pass)>=0){alert("auth 
guard!");
return true;}
else 
this.router.navigate(['/login']);
}
}

je reçois un avertissement après la construction AVERTISSEMENT détecté lors de la reconstruction d'un chemin dupliqué dans loadChildren. Nous allons prendre la dernière version détectée et la remplacer pour gagner du temps de reconstruction. Vous devez effectuer un build complet pour valider que vos itinéraires ne se chevauchent pas.

Donc, je l'ai googlé et trouvé ce commentaire , après avoir ajouté une virgule au dernier chemin, l'avertissement a disparu.

Mais après cela, je me suis connecté à mon application et le message suivant est apparu sur la console: Limiter les changements d'état de l'historique pour empêcher le navigateur de se bloquer Et l'application restait bloquée. 

Des idées pourquoi?

EDIT: J'ai finalement réussi à utiliser «canLoad» au lieu de «canActivate», Mais ce serait formidable si quelqu'un pouvait fournir des informations supplémentaires sur ce problème.

javascriptangularbrowser
9
Vibhu

Supprimer canActivate dans la route de connexion. C'est en boucle.

15
Paqura

Check in the Guard, l'un des chemins essaye de charger plusieurs fois sous forme de boucle . C'était mon problème ..

3
Allu NANDA KISHORE

Dans mon cas, j'ai eu une boucle infinie. 

Si vous utilisez un caractère générique (*) dans votre routage, assurez-vous qu'il s'agit du dernier de la liste. Vous devez d'abord définir tous les autres itinéraires.

{ path '/', component: HomeComponent },
{ path 'profile', component: ProfileComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }
3
Enrico

J'ai récemment eu un problème similaire et en observant votre code, j'ai remarqué deux choses: - Vous placez Authguard dans le chemin de connexion, même s'il s'agit du chemin d'accès .- Vous ne renvoyez pas de valeur négative dans la garde , vous venez de rediriger.

Essayez de réparer ces 2 choses et peut-être que ça va aider. J'ai eu un problème quand je n'ai renvoyé aucune valeur dans le cas négatif et cela m'a causé le même problème que vous rencontrez.

2
bab2683

J'ai déjà eu ce problème pour toute la journée. Trouvé aussi bien cet poste officiel , mais rien n’explique clairement le problème ici.

Je déboguais le problème et j'ai constaté que ma fonction canActivate avait une erreur. J'essayais d'accéder à la propriété d'un objet qui n'était pas initialisé. Je ne m'en rendais pas compte, et après cette erreur (vous ne verrez pas dans la console), le problème "Limiter les changements d'état de l'historique pour empêcher le navigateur de se bloquer" a commencé à se déclencher ...

Juste mes 2 centimes: Assurez-vous que vous n’avez aucune erreur dans la fonction canActivate ou canDeactivate.

J'espère que ça aide quelqu'un!

À votre santé

0
Miguel .Soler