Angular：如何通过路由守卫阻止用户刷新页面或返回上一页

为啥之前的canDeactivate没完全生效？ #

canDeactivate只能拦截Angular路由触发的页面离开——比如点击路由链接、用router.navigate跳转、甚至浏览器后退按钮触发的路由变化，但页面刷新是浏览器原生操作，Angular路由守卫管不到，所以得补充额外处理逻辑。

完整实现步骤 #

1. 调整守卫与组件逻辑 #

守卫可以保留原有通用结构，重点修改组件代码，同时添加页面刷新监听：

守卫代码（无需改动）

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

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

@Injectable({
  providedIn: 'root'
})
export class ConfirmLeaveGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

组件代码修改

在ReceiptComponent中添加刷新监听，并修改canDeactivate方法直接跳转首页：

import { Component, inject, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { CanComponentDeactivate } from './confirm-leave.guard';

export class ReceiptComponent implements CanComponentDeactivate, OnInit, OnDestroy {
  private router = inject(Router);
  private unloadListener?: (event: BeforeUnloadEvent) => void;

  ngOnInit(): void {
    // 监听页面刷新事件
    this.unloadListener = () => {
      // 刷新前存入标记，因为刷新后页面会重启，无法直接执行跳转
      localStorage.setItem('needRedirectHome', 'true');
      // 若不需要浏览器弹出"确认离开"提示，可打开以下两行注释
      // event.preventDefault();
      // event.returnValue = '';
    };
    window.addEventListener('beforeunload', this.unloadListener);
  }

  canDeactivate(): boolean {
    // 处理路由跳转、浏览器后退这类路由级别的离开操作，直接跳转到首页
    this.router.navigate(['/']);
    return true; // 允许路由完成跳转
  }

  ngOnDestroy(): void {
    // 移除监听，避免内存泄漏
    if (this.unloadListener) {
      window.removeEventListener('beforeunload', this.unloadListener);
    }
  }
}

2. 处理刷新后的跳转 #

页面刷新后Angular应用会重新初始化，需要在应用启动时检查标记并执行跳转：

在app.component.ts中添加初始化逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    const needRedirect = localStorage.getItem('needRedirectHome');
    if (needRedirect === 'true') {
      localStorage.removeItem('needRedirectHome'); // 用完即删除标记
      this.router.navigate(['/']);
    }
  }
}

3. 路由配置保持不变 #

你之前的路由配置已经正确添加了canDeactivate守卫，无需修改：

{
  path: 'receipt',
  loadComponent: () => import('receipt.component').then(({ ReceiptComponent }) => ReceiptComponent),
  canDeactivate: [ConfirmLeaveGuard]
},

关键说明 #

• 路由级别的离开（后退、跳转）：靠canDeactivate守卫直接拦截并跳转首页；
• 页面刷新：只能通过beforeunload事件存入标记，待应用重启后读取标记执行跳转——因为刷新时浏览器会直接卸载页面，无法在事件中直接完成跳转；
• 若不需要浏览器弹出“确认离开”的提示框，可取消beforeunload事件的默认行为。

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