Angular路由守卫如何区分页面刷新与手动修改URL跳转场景

核心思路是结合路由跳转自定义状态标记 + 浏览器刷新行为识别 + 会话存储持久化合法访问记录三个维度做校验，可覆盖所有场景：

实现步骤 #

1. 统一规范所有代码触发的路由跳转，跳转时携带自定义状态标记
   所有代码侧调用路由跳转的逻辑统一加上isCodeNav状态标识：

// 代码跳转示例
this.router.navigate(['/target-page'], {
  state: { isCodeNav: true }
});

2. 改造路由守卫的校验逻辑，新增三层判断：

• 第一层：优先判断当前导航是否携带代码跳转的isCodeNav标记，有则直接判定为合法
• 第二层：如果没有标记，通过浏览器Performance API判断是否为页面刷新场景
• 第三层：如果是刷新场景，读取sessionStorage中存储的合法路由访问记录，匹配成功则放行

3. 新增路由事件监听，合法进入路由时存访问记录，离开时销毁记录

改造后的守卫代码示例 #

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

@Injectable({ providedIn: 'root' })
export class RouteNavigateService implements CanActivate {
  private loggedIn: boolean = false;

  constructor(private router: Router) {
    // 监听路由导航完成事件，维护合法访问记录
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(event => {
      // 合法进入路由后存到sessionStorage
      sessionStorage.setItem(`legal_route_${event.urlAfterRedirects}`, 'true');
      // 可选：路由离开时删除对应记录，避免用户退出后还能通过刷新访问
      const prevUrl = this.router.getCurrentNavigation()?.previousNavigation?.finalUrl?.toString();
      prevUrl && sessionStorage.removeItem(`legal_route_${prevUrl}`);
    });
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 先校验登录态，不满足直接拦截
    if (!this.loggedIn) {
      this.router.navigate(['/login']);
      return false;
    }

    const currentNav = this.router.getCurrentNavigation();
    // 优先判断是否为代码触发的跳转
    if (currentNav?.extras.state?.['isCodeNav']) {
      return true;
    }

    // 判断是否为页面刷新场景
    const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    const isPageReload = navEntry?.type === 'reload';
    if (isPageReload) {
      // 刷新场景校验sessionStorage的合法记录
      const hasLegalRecord = sessionStorage.getItem(`legal_route_${state.url}`) === 'true';
      if (hasLegalRecord) return true;
    }

    // 其余情况全部判定为手动修改URL的非法访问，拦截
    this.router.navigate(['/403']);
    return false;
  }
}

补充说明 #

如果是Angular 14及以上版本，还可以结合currentNav.trigger属性做更精准的判断：

• trigger === 'imperative' 对应代码触发的跳转
• trigger === 'popstate' 对应浏览器前进后退、手动改URL、刷新触发的跳转
  配合Performance API的刷新判断，可以进一步适配前进后退的合法场景需求。

内容的提问来源于stack exchange，提问作者Fabio C.