Angular 5：Resolve守卫导致正在进行的导航被取消问题求助

根据你的描述，我大概理清了问题场景：你的AuthGuard在认证成功后调用router.navigate(['/profile'])恢复导航，虽然路由追踪显示Resolve守卫已经完成解析且数据正确，但最终导航还是被莫名取消了。结合Angular路由的生命周期机制，我来分析下可能的原因和对应的解决方案：

核心原因分析 #

这种情况大概率是手动调用router.navigate的方式和Angular路由的内置流程冲突了。当AuthGuard拦截初始导航后，如果你手动触发新的导航请求，原来的导航流程（包括已经激活的Resolve守卫）会被Angular的路由系统终止，就会出现"解析完成但导航取消"的矛盾现象。

解决方案 #

1. 用UrlTree替代手动navigate（推荐方案）

Angular的路由守卫原生支持返回UrlTree来处理重定向，这是官方推荐的标准方式，能让路由系统统一处理导航逻辑，从根源避免冲突。

修改你的AuthGuard代码：

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean | UrlTree {
    if (this.authService.isAuthenticated()) {
      // 已认证，允许当前导航正常继续
      return true;
    }

    // 未认证场景：处理登录逻辑后，返回UrlTree让路由系统自动完成重定向
    // 假设登录成功后需要跳转的目标路由是/profile
    return this.router.createUrlTree(['/profile']);
  }
}

这种方式下，路由系统会接管整个重定向流程，不会中断Resolve守卫的执行链路。

2. 确保Resolve守卫的数据流正确完成

如果Resolve返回的是Observable或Promise，一定要确保它能正确完成，否则Angular会判定解析未完成，进而取消导航。比如给Observable加上take(1)或first()操作符强制完成：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { ProfileService } from './profile.service';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ProfileResolver implements Resolve<any> {
  constructor(private profileService: ProfileService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    // 确保Observable执行一次后主动完成，避免路由系统等待超时
    return this.profileService.getProfile().pipe(take(1));
  }
}

3. 检查路由配置的守卫执行顺序

确保你的路由配置中，AuthGuard和Resolve守卫的顺序合理，避免守卫之间的逻辑冲突：

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard], // 先执行AuthGuard完成认证
    resolve: {
      profileData: ProfileResolver // 认证通过后再执行Resolve解析数据
    }
  }
];

额外排查点 #

如果以上方案都没解决问题，可以保持路由追踪（enableTracing: true）开启，仔细查看导航生命周期的每一步日志，确认是否有其他守卫、路由事件或错误在暗中终止导航。

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