Angular 12中重定向后初始页面禁用浏览器返回按钮失败求助

问题原因 #

用户从外部应用重定向到SPA后，浏览器历史栈中仍保留着外部应用的页面记录，仅在ngOnInit中执行一次history.pushState无法拦截初始的返回操作，导致用户可以回到外部应用。

解决方案 #

通过修改历史栈结构并监听popstate事件，彻底拦截返回至外部应用的操作，同时保留SPA内部的返回逻辑控制权。

实现步骤 #

1. 替换初始历史记录：在SPA初始化时，用当前页面URL替换历史栈中外部应用的记录，消除返回路径。
2. 监听popstate事件：拦截浏览器返回操作，根据需求执行自定义返回逻辑或维持当前页面。
3. 清理事件监听：组件销毁时移除事件监听，避免内存泄漏。

完整代码示例 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  private popStateListener: EventListener;
  private internalHistory: string[] = [];

  constructor(private router: Router) {
    // 记录SPA内部路由历史，用于自定义返回逻辑
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 避免重复记录相同路由
        if (this.internalHistory[this.internalHistory.length - 1] !== event.url) {
          this.internalHistory.push(event.url);
        }
      }
    });
  }

  ngOnInit(): void {
    // 替换历史栈中外部应用的记录，确保初始栈中只有SPA页面
    history.replaceState(null, '', window.location.href);
    // 补充一条空记录，确保首次返回触发popstate事件
    history.pushState(null, '');

    // 监听浏览器返回事件
    this.popStateListener = () => {
      // 执行自定义返回逻辑：优先返回SPA内部上一页
      if (this.internalHistory.length > 1) {
        this.internalHistory.pop();
        const prevUrl = this.internalHistory[this.internalHistory.length - 1];
        this.router.navigateByUrl(prevUrl);
      } else {
        // 无内部历史时，保持在当前页面
        history.pushState(null, '');
      }
    };
    window.addEventListener('popstate', this.popStateListener);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，防止内存泄漏
    window.removeEventListener('popstate', this.popStateListener);
  }
}

代码说明 #

• history.replaceState：将历史栈中外部应用的记录替换为当前SPA页面，消除返回至外部应用的路径。
• internalHistory数组：记录SPA内部的路由跳转历史，用于实现自定义的内部返回逻辑。
• popstate事件监听：拦截浏览器返回操作，优先跳转到SPA内部的上一个页面；若没有内部历史，则通过history.pushState维持当前页面，阻止返回至外部应用。

注意事项 #

• 该方案仅拦截浏览器原生返回按钮操作，若需控制SPA内部路由的跳转，可结合Angular的路由守卫（如CanDeactivate）进一步增强控制。
• 确保在组件销毁时移除popstate事件监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Ash