La garde est toujours redirigée vers la route par défaut

Question

J'ai un garde qui vérifie la session d'un utilisateur. Je crée une observable à partir d'une promesse et rend cette observable.

Malheureusement, le routeur me redirige toujours vers la page d'accueil lors de l'actualisation. Je suppose que cela a à voir avec l'observable comme quand je navigue simplement, il entre dans le if et renvoie le 'Observalbe.of (true)', qui fonctionne. J'ai essayé de remplacer l'observable par un 'return true' et tout fonctionne comme prévu.

Des idées? Merci!

Answer 1

Cela ne fonctionne pas car canActivate est supposé renvoyer un booléen. Pourquoi voudriez-vous utiliser un Observable?

Answer 2

Première, la définition de canActivate est la suivante:

export interface CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean; 
} 

Vous devez ajouter les paramètres dans la fonction.

Deuxième, si vous allez retourner un observable et seulement un observable, puis changer le type de retour juste observable. Si vous voulez un mixage, vous pouvez laisser plusieurs types de retour.

Troisième, retirez l'opérateur prendre() et factoriser la garde à ressembler à ceci:

@Injectable() 
export default class SessionGuard implements CanActivate { 

    constructor(private authService: AuthService) {} 

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
    if (this.authService.hasSessionChecked) { 
     return true; 
    } 
    const obs = Observable.fromPromise(this.authService.getSession()); 
    return obs.map(session => { 
     this.authService.setUserSession(session); 
     return true; 
    }); 
    } 
} 

Answer 3

Comme suggéré @trichetriche, j'ai remplacé l'observable avec une promesse et retourné que.

Cela fonctionne très bien maintenant.

return this.authService.getSession().then(
    data => { 
    this.authService.setUserSession(data); 
    return true; 
    }, 
    err => false, 
);