如何在Angular项目中捕获用户输入的无效访问URL

可以实现，你拿不到无效URL的核心原因是当前路由配置直接将通配符路径重定向到了/auth，重定向动作在路由匹配阶段就已完成，你读取当前路由时自然只能拿到重定向后的/auth地址，调整逻辑即可捕获原始错误路径，下面是两种常用实现方案：

方案1：调整路由配置，优先捕获无效路径（更推荐，逻辑清晰性能损耗低） #

你现有路由配置应该类似如下写法：

const routes: Routes = [
  { path: 'auth', component: AuthComponent },
  // 其他你配置的有效路由
  { path: '**', redirectTo: '/auth' }
];

将通配符路由的逻辑修改为先捕获路径再重定向即可，不需要修改其他业务逻辑：

1. 新增一个路由守卫用来捕获无效路径：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class InvalidRouteCaptureGuard implements Resolve<void> {
  constructor(private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): void {
    // 此处即可拿到用户输入的完整无效路径
    const invalidUrl = `/${route.url.map(segment => segment.path).join('/')}`;
    // 此处可以加你自己的业务逻辑，比如上报错误路径、存储等
    console.log('捕获到无效访问URL：', invalidUrl);
    // 处理完成后执行原有的重定向逻辑
    this.router.navigate(['/auth']);
  }
}

2. 修改路由配置，将通配符路由关联到上述守卫：

const routes: Routes = [
  { path: 'auth', component: AuthComponent },
  // 其他所有有效路由保持不变
  { 
    path: '**', 
    resolve: { capture: InvalidRouteCaptureGuard }
    // 无需配置component或redirectTo，守卫内部会处理重定向
  }
];

方案2：全局监听路由事件，无需修改现有路由配置 #

如果你不想改动现有路由的重定向逻辑，可以直接在根组件内监听路由导航事件，自行匹配无效路径：

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

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent {
  // 存储导航开始时的原始访问地址
  private originNavigateUrl: string = '';
  // 填入你所有配置过的有效路由前缀
  private validRouteList: string[] = ['/auth'];

  constructor(private router: Router) {
    // 监听导航开始事件，记录用户要访问的原始地址
    this.router.events.pipe(
      filter(event => event instanceof NavigationStart)
    ).subscribe((event: NavigationStart) => {
      this.originNavigateUrl = event.url;
    });

    // 监听导航结束事件，判断是否为无效路由重定向
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 最终导航到/auth，且原始访问地址不在有效路由列表内，即为无效访问路径
      if (event.url === '/auth' && !this.validRouteList.includes(this.originNavigateUrl)) {
        // 此处可以加你自己的业务逻辑
        console.log('捕获到无效访问URL：', this.originNavigateUrl);
      }
    });
  }
}

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