Angular懒加载路由中CanMatch守卫如何获取完整跳转URL用于认证重定向

针对懒加载路由场景下，CanMatch守卫无法直接获取用户访问的完整URL（含查询参数）的问题，这里提供两种可靠的解决方案：

方法一：通过Location服务直接获取完整路径 #

Angular的Location服务可以直接返回当前页面的完整路径（包含查询参数），在CanMatch守卫触发时，这个路径就是用户尝试访问的目标URL，实现起来最简单直接。

代码实现 #

import { Injectable } from '@angular/core';
import { CanMatch, Route, UrlSegment, Router } from '@angular/router';
import { Location } from '@angular/common';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class MyAuthGuard implements CanMatch {
  constructor(
    private authService: AuthService,
    private router: Router,
    private location: Location
  ) {}

  canMatch(route: Route, segments: UrlSegment[]): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    }

    // 获取带查询参数的完整URL
    const fullRedirectUrl = this.location.path();
    // 存入AuthService，供登录后重定向使用
    this.authService.setRedirectUrl(fullRedirectUrl);

    // 跳转至登录页
    this.router.navigate(['/login']);
    return false;
  }
}

方法二：通过Router.getCurrentNavigation()获取导航上下文 #

利用Router的getCurrentNavigation()方法，可以获取当前导航的完整上下文，其中finalUrl属性包含了解析后的完整目标URL（含路径和查询参数），直接调用toString()即可得到完整的URL字符串。

代码实现 #

import { Injectable } from '@angular/core';
import { CanMatch, Route, UrlSegment, Router, Navigation } from '@angular/router';
import { AuthService } from './auth.service';

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

  canMatch(route: Route, segments: UrlSegment[]): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    }

    const currentNav = this.router.getCurrentNavigation();
    if (currentNav?.finalUrl) {
      // 直接提取完整URL字符串
      const fullRedirectUrl = currentNav.finalUrl.toString();
      this.authService.setRedirectUrl(fullRedirectUrl);
    }

    this.router.navigate(['/login']);
    return false;
  }
}

登录后重定向示例 #

登录成功后，从AuthService取出存储的URL并完成跳转：

// auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
  private redirectUrl: string = '';

  setRedirectUrl(url: string): void {
    this.redirectUrl = url;
  }

  getRedirectUrl(): string {
    return this.redirectUrl || '/';
  }
}

// login.component.ts
login(): void {
  // 执行登录逻辑...
  const redirectUrl = this.authService.getRedirectUrl();
  this.router.navigateByUrl(redirectUrl);
}

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