javascript - Cum să actualizezi URL-ul paginii anterioare în Angular

Întrebare: Cum să elimin ruta anterioară url din istoric astfel încât butonul înapoi al browserului să o ocolească?

În aplicația mea, dacă datele sunt invalide sau apar alte probleme - Angular efectuează redirecționarea către pagina de eroare. Dar dacă se apasă butonul "Înapoi" din browser - utilizatorul este redirecționat din nou către pagina de eroare și de acolo din nou către pagina de eroare. Deci este un fel de ciclu fără sfârșit.

Ideea este de a elimina url anterior (cu date invalide) din istoric, astfel încât redirecționarea anterioară să ducă la pagina de dinaintea url cu date invalide.

Avem niște API browser.location în JS vanilla, dar cum să facem asta în modul Angular?

Actualizare: există multe moduri de a obține URL-ul anterior, cum ar fi: Cum să determini URL-ul paginii anterioare în Angular?. Dar cum să îl setezi?

Soluție: Am încercat să folosesc Angular Location.replaceState() pentru a suprascrie istoricul. Din anumite motive, acesta a șters doar o intrare din istoric fără să o înlocuiască: https://angular.io/api/common/Location#replaceState Comportament similar a fost și în vanilla JS History.replaceState(): https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState

Am ajuns să schimb designul pentru a folosi skipLocationChange: true în NavigationExtras: https://angular.io/api/router/NavigationExtras, așa că răspunsul lui Bálint Réthy se potrivește cel mai bine.

Răspuns #1

Trebuie să folosești opțiunile de navigare. Când primești o eroare care navigatează către pagina de eroare, aceasta ar trebui implementată cu NavigationExtras. Acolo poți defini skipLocationChange sau replaceUrl.

• skipLocationChange sări peste adăugarea stării în istoric atunci când navigarea se schimbă
• replaceUrl redefinește starea curentă în istoric

Codul ar trebui să arate cam așa:

this.router.navigate(['/error'], { replaceUrl: true });

Referință documentație: https://angular.io/api/router/NavigationExtras

Răspunsul #2

Metoda CanActivate a unui gard de rutare Angular vă va ajuta să rezolvați problema noastră; aceasta se va declanșa când utilizatorul navighează sau încearcă să navigheze de la un ecran la altul. De asemenea, vă va oferi următoarele rute URL pe care le puteți manipula ușor conform cerințelor dvs. Trebuie doar să includeți gardul de rutare în provider și să implementați gardul de rutare CanActivate.

pasul 1-implementează interfața CanActivate

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

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // here you can write you logic example-> you can navigate to some where else protect navigation
    console.log('AuthGuard#canActivate called');
    return true;
  }
}

pasul 2 -> spune tabelului tău de rutare că ai un paznic care să-ți protejeze ruta :P

 import { AuthGuard }  from '../auth/auth.guard';

    const adminRoutes: Routes = [

    { path: 'crises', component: ManageCrisesComponent },
    { path: 'admin',  component: AdminComponent, canActivate: [AuthGuard]} // -->your Auth guard will get register here 
    ];

pentru mai mult ajutor consultați - Angular Portal Medium