web-dev-qa-db-fra.com

Uncaught (promis): Erreur: garde CanActivate non valide

Im newbee pour angular 7 et essaye maintenant d'implémenter CanActive, mais je reçois une erreur:

enter image description here

Quelqu'un peut-il me guider pour surmonter cela. Mes exemples de code sont les suivants:

auth.guard.ts: 

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth-service.service';
import {Router} from '@angular/router';

@Injectable({
 providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService,
private myRoute: Router){
}

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if(this.auth.isLoggednIn()){
  return true;
}else{
  this.myRoute.navigate(["login"]);
  return false;
}
  }
}
angular7
4
learningBird

Utiliser une promesse dans une condition if est toujours une mauvaise idée, car elle n'est pas résolue. Vous pouvez retourner la promesse elle-même, en utilisant resolve pour passer le booléen résultant plus loin sur la ligne:

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Promise<boolean> | boolean {
   return new Promise(resolve =>
     this.auth.isLoggednIn()
       .then(status: boolean => {
         if(status === false) {
           this.myRoute.navigate(["login"]);
         }
         resolve(status);
       })
       .catch(() => {
         this.myRoute.navigate(["login"]);
         resolve(false);
         // ... or any other way you want to handle such error case
       })
  }
}
1
Entertain

Veuillez essayer ceci:

   return this.auth.isLoggednIn() ? true : this.myRoute.navigate(["login"]);

J'ai le même message d'erreur lorsque j'ai fait ce qui suit:

   canDeactivate(component: CreateEmployeeComponent): boolean {
        if(component.createEmployeeForm.dirty) {
           return confirm('Are you sure you want to discard your changes?');
        }
        return true;
   }

J'ai donc résolu le problème de la manière suivante:

    canDeactivate(component: CreateEmployeeComponent): boolean {
         return component.createEmployeeForm.dirty 
                ? confirm('Are you sure you want to discard your changes?') 
                : true;    
    }

Je ne suis pas sûr que cela fonctionne pour vous, mais vous pouvez au moins l'essayer.

1
William Hou