4
votes

comment désactiver le bouton retour après la déconnexion dans angular 7

J'ai une page de connexion dans le cadre de ma candidature. Je souhaite désactiver mon bouton de retour après la déconnexion réussie afin que l'utilisateur ne puisse pas revenir en arrière.

angular

2 commentaires

vous pouvez manipuler l'historique du navigateur. vérifiez developer.mozilla.org/en-US/docs/Web/API / History_API

Je pense que vous devriez utiliser canActivate et / ou canActivateChild plutôt que d'empêcher les événements du navigateur. Que faire si je ne «retourne pas» mais saisis l'URL?

3 Réponses :

1
votes

Vous ne pouvez pas le désactiver, vous ne pouvez que l'empêcher. Vérifiez simplement l'état de connexion et redirigez-le vers une page spécifique s'ils sont redirigés vers une page qui devait être connectée

1 commentaires

en fait, nous pouvons le désactiver en utilisant authguard. Voici l'exemple.

5
votes

Vous pouvez ajouter un gardien à surveiller et décider si l'utilisateur peut accéder à la page ou non plutôt que de désactiver les événements du navigateur. CanActivate est le sauveur

CanActivate ( Interface )

Interface qu'une classe peut implémenter pour être un garde décidant si une route peut être activé. Si tous les gardes retournent vrai, la navigation continuera. Si un garde renvoie false, la navigation sera annulée. De la documentation officielle d'Angular

Ici, j'ajoute du code que j'utilise actuellement. J'espère que cela vous aidera à comprendre comment en implémenter un.

{
    path: 'dashboard',
    component: DashboadComponent,
    canActivate: [LoginGuard]
}

ajoutez cette classe LoginGuard dans le fournisseur de votre app.module.ts

XXX

puis ajoutez canActive dans l'itinéraire pour le garder.

providers: [{ provide: LoginGuard, useClass: LoginGuard }]

0 commentaires

0
votes

oui Auth gurad est utile ici.

{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
{ path: 'logout', component: LogoutComponent , canActivate:[AuthGuard]}

Ajoutez la garde d'authentification dans app.module.ts

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

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

  constructor(private authService: AuthService) {

  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.getisLoggedIn();
  }
}

Pour qu'après la déconnexion, nous puissions désactiver le bouton de retour

Ajoutez la garde d'authentification dans le cadre de app.module.ts fournisseurs: [AuthGuard]

0 commentaires