在Angular 12中禁用浏览器后退按钮答案

【问题标题】：Disable Browser Back Button in Angular 12在Angular 12中禁用浏览器后退按钮
【发布时间】：2022-10-25 23:31:13
【问题描述】：

我正在使用 Angular 12 开发 SPA。

用户不直接加载此 Web 应用程序，他们先打开另一个 Web 应用程序，然后重定向到新的 SPA。

在新的 SPA 中，我想禁用浏览器后退按钮以停止导航。如果用户真的想返回，新的 SPA 拥有所有控制权。

我已使用以下代码禁用后退按钮，但它在用户第一次重定向后获得的初始页面上不起作用。从那里开始，后退按钮被禁用。

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    history.pushState(null, '');
  }
}

由于重定向浏览器知道以前的位置并允许返回。

你知道我该如何解决这个问题吗？

谢谢并恭祝安康，

灰

【问题讨论】：

这回答了你的问题了吗？ How can I stop the browser back button using JavaScript?
如果您真的希望用户重定向到新应用程序，那么从服务器配置您可以永久重定向到新 URL 301，这样浏览器就不会记住以前的 URL，也无需禁用后退按钮。
@ShabbirDhangot 谢谢你的回答，但我仍然没有找到答案。我尝试了上面链接中的javascript。它仅在最终用户进行状态更改时才有效，否则，它不起作用我从浏览器得到以下错误。 “阻止尝试为自加载以来从未有过用户手势的框架显示 'beforeunload' 确认面板”
@ShabbirDhangot 关于重定向，是的，我在 .Net 4.8 MCV 应用程序中使用 RedirectPermanent，但是它执行 304 重定向而不是 301
您只需要 301 来通知浏览器它已永久移动。请与任何系统管理员核实。

标签： javascript angular frontend web-deployment angular12

【解决方案1】：

这是一种 chrome 行为，如果用户没有与页面进行任何交互，我们无法禁用后退按钮。

让这个工作从 chrome

[干预] 阻止尝试为自加载以来从未有过用户手势的框架显示“卸载前”确认面板。

【讨论】：

【解决方案2】：

首先，我禁用路由（例如在 onInit 中）。

history.pushState(null, '');

然后你可以用那个事件做一些事情（rxjs的fromEvent部分）

fromEvent(window, 'popstate').subscribe(()=>{
    // do what you want
    alert('heeeee')
 })

【讨论】：