Angular中CanActivate守卫校验时显示加载指示器的标准方案

这个问题我之前也碰到过，用户盯着空白页面等3-4秒确实糟心，Angular里有几种标准的实现方式，分享给你：

方法一：通过路由事件全局监听 #

这种方式会监听所有路由跳转的生命周期，只要路由开始导航就显示Spinner，导航结束（无论成功、取消还是出错）就隐藏，能覆盖包括CanActivate守卫在内的所有路由等待场景。

实现步骤： #

1. 在根组件（比如AppComponent）中注入Router，并监听路由事件：

import { Component } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <!-- 加载Spinner组件 -->
    <div *ngIf="showSpinner" class="spinner-overlay">
      <div class="spinner"></div>
    </div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  showSpinner = false;

  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      // 路由开始导航时显示Spinner
      if (event instanceof NavigationStart) {
        this.showSpinner = true;
      }
      // 导航结束/取消/出错时隐藏Spinner
      else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
        this.showSpinner = false;
      }
    });
  }
}

2. 添加Spinner的样式，让它全屏居中显示：

.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

方法二：在CanActivate守卫中精准控制Spinner服务 #

如果只有特定路由的守卫需要显示Spinner，这种方式更精准，不会影响其他路由跳转的体验。

实现步骤： #

1. 创建一个全局共享的SpinnerService，用来统一控制Spinner的显示和隐藏：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SpinnerService {
  // 使用BehaviorSubject保存Spinner状态，方便组件订阅
  private spinnerState = new BehaviorSubject<boolean>(false);
  spinnerState$ = this.spinnerState.asObservable();

  show() {
    this.spinnerState.next(true);
  }

  hide() {
    this.spinnerState.next(false);
  }
}

2. 在你的CanActivate守卫中注入该服务，在校验开始时显示Spinner，校验结束（无论成功或失败）时隐藏：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { SpinnerService } from './spinner.service';

@Injectable({ providedIn: 'root' })
export class YourAuthGuard implements CanActivate {
  constructor(private spinnerService: SpinnerService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 校验开始时显示Spinner
    this.spinnerService.show();

    // 这里替换成你的实际校验逻辑（比如调用后端接口）
    return this.checkUserPermissions().pipe(
      // 使用finalize确保无论校验成功/失败，都会隐藏Spinner
      finalize(() => this.spinnerService.hide())
    );
  }

  private checkUserPermissions(): Observable<boolean> {
    // 模拟3-4秒的异步校验过程
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(true); // 假设校验通过
        observer.complete();
      }, 3500);
    });
  }
}

3. 在根组件中订阅SpinnerService的状态，控制Spinner显示：

import { Component } from '@angular/core';
import { SpinnerService } from './spinner.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="spinnerState$ | async" class="spinner-overlay">
      <div class="spinner"></div>
    </div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  spinnerState$ = this.spinnerService.spinnerState$;

  constructor(private spinnerService: SpinnerService) {}
}

注意事项： #

• 用finalize操作符是关键，它能确保即使校验过程中出现错误，Spinner也会被隐藏，避免一直卡在加载状态。
• 如果你的守卫中有多个异步分支，也一定要确保每个分支都调用hide()，finalize能帮你省掉重复代码。

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