J'implémente le routage dans mon application Angular avec route guard

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', canActivate: [AuthGuard], component: DashboardComponent }
];

Auth.gaurd.ts

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


@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if (this.authService.isAuthenticated()) {
            return true;
        } else {
            this.router.navigate(['/']);
            return false;
        }
    }
}

Login.component.ts (fonction qui répond une fois que vous cliquez sur le bouton de connexion)

public onSubmit(loginForm): void {
    this.loginFailed = false;
    this.submitted = true;

    if (loginForm.invalid) {
      return;
    }

    if (this.authService.login(this.userName, this.password)) {
      console.log('ABLE TO CONSOLE THIS'); // THIS LINE IS EXECUTING 
      this.router.navigate(['/dashboard']);
    } else {
      this.loginFailed = true;
    }
  }

Au début, si je ne suis pas authentifié et que j'essaye de naviguer directement vers /dashboard, je suis redirigé vers la route '/' qui est le bon comportement. Mais, lorsque j'essaye de me connecter à nouveau (sans actualiser la page) avec des informations d'identification correctes, je ne peux plus me connecter et ne peux plus accéder à /dashboard.

Quelqu'un pourrait-il s'il vous plaît me faire savoir ce que je manque ici?

0
Rocky 28 févr. 2021 à 17:33

2 réponses

Meilleure réponse

Le problème est que vous utilisez, canActivate, qui empêche uniquement l'accès non autorisé de votre route mais n'empêche pas de charger le module. donc votre module est déjà en cours de chargement, c'est pourquoi il ne fonctionne pas, actualisez.

Je vais vous suggérer d'utiliser canLoad avec canActive

1
prashant Jha 28 févr. 2021 à 16:21

Le moyen le plus propre et suggéré de gérer une redirection de garde depuis Angular v7 serait de renvoyer un URLTree à l'intérieur de votre garde, au lieu de naviguer impérativement et de renvoyer false par la suite. Cela permet d'éviter d'autres bogues liés à la navigation.

Votre code pourrait ressembler à ceci par la suite:

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if (this.authService.isAuthenticated()) {
            return true;
        } else {
            return this.router.parseUrl('/');
        }
    }

Vous pouvez en savoir plus à ce sujet ici: https://juristr.com / blog / 2018/11 / better-route-guard-redirects /

0
mitschmidt 28 févr. 2021 à 20:56