Angular 8中canActivate守卫执行两次致新标签重复打开的解决方法

我之前也碰到过一模一样的情况！Angular守卫里的canActivate被连续触发两次，大概率是因为Angular的变更检测机制或者路由事件重复触发导致的，尤其是在你直接返回false的场景下，框架可能会再次校验守卫状态。下面给你几个实用的解决办法：

1. 添加执行标记（防抖处理） #

在守卫类里新增一个私有变量来标记当前是否正在处理请求，确保同一时间段内只执行一次window.open：

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

@Injectable({ providedIn: 'root' })
export class MyGuard implements CanActivate {
  // 标记是否正在处理守卫逻辑
  private isProcessing = false;

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 如果正在处理，直接返回false，避免重复执行
    if (this.isProcessing) {
      return false;
    }

    if (condition) {
      this.isProcessing = true;
      window.open(url);
      // 延迟重置标记，确保后续正常触发守卫时能正常执行
      setTimeout(() => {
        this.isProcessing = false;
      }, 100);
    }
    return false;
  }
}

这个方法简单直接，能有效阻止重复调用带来的多次弹窗问题。

2. 检查路由配置是否重复 #

花两分钟确认下你的路由配置，有没有在多个地方（比如懒加载模块的路由里）重复注册了dashboardRoutes.MY_ROUTE这条路由？如果同一个路由被多次注册，守卫也会被多次触发。

3. 异步条件场景的额外处理 #

如果你的condition是通过异步操作获取的（比如从接口请求），一定要确保只订阅一次结果，避免多次触发逻辑：

import { take, map } from 'rxjs/operators';

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.yourService.getCondition().pipe(
    take(1), // 只取一次Observable的值，防止重复订阅
    map(condition => {
      if (condition) {
        window.open(url);
      }
      return false;
    })
  );
}

为什么会出现这种情况？ #

Angular在某些场景下会重新触发守卫校验：比如路由复用策略、浏览器刷新时的路由初始化，或者当守卫返回false后，框架可能会再次检查状态。通过添加执行标记，就能在第一次执行后拦截后续的重复调用。

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