如何在Angular应用中限制URL中的特殊字符及多余字符？

一、全局捕获路由导航错误 #

Angular路由系统在导航失败时会抛出NavigationError事件，你可以在根组件中监听这个事件，统一触发错误提示：

在app.component.ts中添加如下代码：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationError } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听路由导航错误
    this.router.events.subscribe(event => {
      if (event instanceof NavigationError) {
        alert('输入的URL无效，请检查后重试');
        // 可选：重定向回首页
        // this.router.navigate(['/home']);
      }
    });
  }
}

二、处理哈希(#)片段的非法输入 #

如果项目使用默认的PathLocationStrategy，URL中的#属于片段标识符，不会触发路由错误。要处理这类场景，需监听路由片段变化并做合法性校验：

在app.component.ts中补充代码：

import { ActivatedRoute } from '@angular/router';

// 构造函数注入ActivatedRoute
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  // 监听URL片段变化
  this.activatedRoute.fragment.subscribe(fragment => {
    if (fragment && this.isInvalidFragment(fragment)) {
      alert('URL末尾的片段包含非法字符，请检查');
      // 清除非法片段，保留原路由
      this.router.navigate([], { fragment: null });
    }
  });

  // 保留之前的NavigationError监听代码...
}

// 自定义非法片段判断规则，比如仅允许字母、数字、-/_
private isInvalidFragment(fragment: string): boolean {
  const validPattern = /^[a-zA-Z0-9\-_]*$/;
  return !validPattern.test(fragment);
}

三、配置通配符路由处理不存在的路径 #

对于/homeadsafsf这类完全未定义的路由，在路由配置中添加通配符路由，直接触发错误提示：

在app-routing.module.ts中修改路由配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { InvalidUrlGuard } from './guards/invalid-url.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  // 通配符路由，匹配所有未定义的路径
  { 
    path: '**', 
    canActivate: [InvalidUrlGuard],
    redirectTo: '/home'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

创建invalid-url.guard.ts路由守卫：

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

@Injectable({
  providedIn: 'root'
})
export class InvalidUrlGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    alert('访问的路径不存在，请检查URL');
    this.router.navigate(['/home']);
    return false;
  }
}

四、处理URL编码字符（如%jbkjb）的异常 #

这类编码错误通常会触发NavigationError，可以在全局监听中根据错误信息做精准提示：

this.router.events.subscribe(event => {
  if (event instanceof NavigationError) {
    if (event.error.message.includes('URI malformed')) {
      alert('URL包含非法编码字符，请检查');
    } else {
      alert('输入的URL无效，请检查后重试');
    }
    this.router.navigate(['/home']);
  }
});

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