Início / coding / Perguntas / 79563768
Accepted
Karthik S
Asked: 2025-04-09 15:54:32 +0800 CST

CanDeactivate + Botão Voltar do navegador causa navegação dupla ou ignora rota -- Prevenção de retorno do navegador Angular

  • 772

Problema

Estou usando um CanDeactivateprotetor no Angular para avisar o usuário antes de sair de um formulário com alterações não salvas. Funciona bem para alterações de rota normais (por exemplo, clicar em um link), mas trava quando o usuário pressiona o botão Voltar do navegador .

Cenário

Digamos que meu fluxo de roteamento seja:

/home → /usuário → /editar

  • O usuário está conectado /editcom alterações não salvas.
  • Pressiona o botão Voltar do navegador .
  • Uma caixa de diálogo de confirmação é exibida via CanDeactivate.
  • Se o usuário cancelar , a rota permanece a mesma (correta).
  • Mas quando eles pressionam novamente e confirmam , ele navega dois passos para trás /home, pulando/user .

O que eu tentei

Implementei uma CanDeactivateguarda como esta:

export class YourFormComponent implements CanComponentDeactivate, OnInit, AfterViewInit {
    hasUnsavedChanges = false;

    // Implement the canDeactivate method
    canDeactivate(): Observable<boolean> | boolean {
      if (!this.hasUnsavedChanges) {
        return true;
      }

      const confirmLeave = window.confirm('You have unsaved changes. Leave anyway?');
      return confirmLeave;
    }
}

rota.ts

import { Routes } from '@angular/router';
import { YourFormComponent } from './your-form.component';
import { ConfirmLeaveGuard } from './confirm-leave.guard';

const routes: Routes = [
  {
    path: 'form',
    component: YourFormComponent,
    canDeactivate: [ConfirmLeaveGuard]
  }
];

confrim-leave.guard.ts

import { inject } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';
import { Location } from '@angular/common';
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const ConfirmLeaveGuard: CanDeactivateFn<CanComponentDeactivate> = (component: any, currentRoute, currentState, nextState) => {
  const location = inject(Location);
  const result = component.canDeactivate();

  // If it's a boolean value
  if (typeof result === 'boolean') {
    if (!result) {
      location.replaceState(window.location.pathname); // Restore URL
    }
    return result;
  }

  // If it's an Observable or Promise
  if (result instanceof Observable || result instanceof Promise) {
    return new Promise(resolve => {
      Promise.resolve(result).then(confirmed => {
        if (!confirmed) {
          location.replaceState(window.location.pathname); // Restore URL
        }
        resolve(confirmed);
      });
    });
  }

  return true;
};

Também tentei usar Location.replaceState() ou Location.go() dentro do guarda para restaurar a pilha do histórico, mas ele ainda funciona mal ao usar o botão Voltar.

Pergunta Como posso manipular corretamente o botão Voltar do navegador com CanDeactivate para evitar navegação dupla ou rotas ignoradas?

Qualquer conselho ou exemplo será apreciado.

Exemplo de Stackblitz

Imagem de trabalho - https://s6.imgcdn.dev/YjXe3M.gif

javascript

2 respostas

  1. Best Answer

    Usando seu StackBlitz, talvez eu tenha uma solução. Tente substituí-lo canDeactivateGuardpor esta versão. CanDeactivateA proteção do Angular não impede diretamente a navegação de retorno da maneira que desejamos. A proteção apenas cancela a navegação para a nova rota, mas não a interrompe. Portanto, parece que o navegador está "mantendo" o retorno anterior e, quando você cancela novamente, ele adiciona outro retorno a ele, e é por isso que ele retorna dois passos.

    Esta solução provavelmente não é perfeita, mas espero que possa ajudar você a chegar ao lugar certo.

    import { inject } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { Observable, of } from 'rxjs';
import { Location } from '@angular/common';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (
  component: CanComponentDeactivate,
  currentRoute,
  currentState,
  nextState
) => {
  const location = inject(Location);
  const result = component.canDeactivate();

  if (typeof result === 'boolean') {
    if (!result) {
      // Restore the current URL if the user cancels
      window.history.pushState(null, '', currentState.url);
    }
    return of(result); // Wrap the result in an Observable
  }

  // If it's an Observable or Promise, handle it properly
  if (result instanceof Observable) {
    return new Observable<boolean>((observer) => {
      result.subscribe((confirmed) => {
        if (!confirmed) {
          // Restore the current URL if the user cancels
          window.history.pushState(null, '', currentState.url);
        }
        observer.next(confirmed);
        observer.complete();
      });
    });
  }

  if (result instanceof Promise) {
    return new Observable<boolean>((observer) => {
      result.then((confirmed) => {
        if (!confirmed) {
          // Restore the current URL if the user cancels
          window.history.pushState(null, '', currentState.url);
        }
        observer.next(confirmed);
        observer.complete();
      });
    });
  }

  return of(true); // Default case if no action needed
};
    • 2

  2. Aqui está um exemplo menos complexo de canDeactivate. Podemos reutilizá-lo canDeactivateem vários componentes usando o decoratorpadrão.

    Podemos definir o decorador para adicionar a canActivatefunção à nossa classe.

    function CanDeactivate(value = CanDeactivateContact) {
  return function decorator(target) {
    target.prototype.canDeactivate = value.prototype.canDeactivate;
  };
}

    Como você pode ver neste código, usamos CanDeactivateContactcomo classe padrão canDeactivate, mas podemos personalizá-la passando outra classe.

    Na função decoradora, simplesmente adicionamos o canDeactivatemétodo de uma classe para outra.

    Depois disso, usamos HostListenero método _event_ específico para o evento _ window:beforeunload, que não podemos chamar, canDeactivatepois não adicionamos a propriedade na classe. Portanto, podemos usar dot syntax( this['canDeactivate'](this);) e chamar este método.

    @Component({
  templateUrl: './contact.component.html',
})
@CanDeactivate()
export class ContactComponent {
  @ViewChild('contactForm') public contactForm: NgForm;
  changed = false;

  @HostListener('window:beforeunload', ['$event'])
  onBeforeUnload() {
    return this['canDeactivate'](this);
  }
}

    Demonstração do Stackblitz

    • 1

relate perguntas