CoreUI + Angular 18：路由切换时HTTP拦截器未生效求助

我刚接触CoreUI与Angular 18，希望在用户切换路由时拦截请求。基于CoreUI现代主题完成配置后，发现路由切换并未被拦截，恳请帮忙排查问题所在。

相关代码 #

app.component.ts #

import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from './icons/icon-subset';

@Component({
  selector: 'app-root',
  template: '<router-outlet />',
  standalone: true,
  imports: [RouterOutlet]
})
export class AppComponent implements OnInit {
  title = 'CoreUI Pro Angular Admin Template';

  constructor(
    private router: Router,
    private titleService: Title,
    private iconSetService: IconSetService
  ) {
    this.titleService.setTitle(this.title);
    // iconSet singleton
    this.iconSetService.icons = { ...iconSubset };
  }

  ngOnInit(): void {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
    });
  }
}

app.config.ts #

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
  withHashLocation,
  withInMemoryScrolling,
  withRouterConfig,
  withViewTransitions
} from '@angular/router';

import { DropdownModule, SidebarModule } from '@coreui/angular-pro';
import { IconSetService } from '@coreui/icons-angular';
import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from '../interceptors/auth.interceptor';
import { JwtModule } from '@auth0/angular-jwt';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes,
      withRouterConfig({
        onSameUrlNavigation: 'reload'
      }),
      withInMemoryScrolling({
        scrollPositionRestoration: 'top',
        anchorScrolling: 'enabled'
      }),
      withEnabledBlockingInitialNavigation(),
      withViewTransitions(),
      withHashLocation()
    ),
    importProvidersFrom(SidebarModule, DropdownModule, JwtModule.forRoot({})),
    IconSetService,
    provideAnimations(),
    provideHttpClient(withInterceptors([authInterceptor])), 
  ]
};

auth.interceptor.ts #

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
    console.log("Intercepting Requests")
    return next(authReq);
};

_nav.ts #

{
    name: 'Pages',
    url: '/login',
    iconComponent: { name: 'cil-star' },
    children: [
      {
        name: 'Login',
        url: '/login',
        icon: 'nav-icon-bullet'
      },
      {
        name: 'Register',
        url: '/register',
        icon: 'nav-icon-bullet'
      },
    ]
  },

问题根源与解决方法 #

1. 核心概念混淆：HTTP拦截器 ≠ 路由拦截 #

你当前使用的authInterceptor是HTTP请求拦截器，它只能拦截HttpClient发起的网络API请求，完全不处理路由切换行为。要拦截路由切换，必须使用Angular的路由守卫（比如CanActivate、CanLoad等）。

2. HTTP拦截器本身存在语法错误 #

你的authInterceptor里使用了未定义的变量authReq，这会导致代码报错，即使有HTTP请求也无法被正常拦截。修复后的拦截器代码如下：

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
    console.log("拦截HTTP请求");
    // 若需修改请求（比如添加Token），可在此处克隆请求并修改
    const authReq = req.clone({
        // 示例：添加Authorization头
        // setHeaders: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    });
    return next(authReq);
};

3. 实现路由切换拦截的正确方式 #

创建路由守卫来拦截路由切换：

步骤1：创建路由守卫文件 auth.guard.ts

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = (route, state) => {
    console.log(`拦截路由切换：当前路径${route.url}，目标路径${state.url}`);
    
    // 这里替换为你的实际校验逻辑（比如判断用户是否登录）
    const isLoggedIn = !!localStorage.getItem('token');
    
    if (!isLoggedIn) {
        // 未登录则跳转到登录页
        inject(Router).navigate(['/login']);
        return false;
    }
    return true;
};

步骤2：在路由配置中应用守卫

修改app.routes.ts，为需要拦截的路由添加守卫：

import { Routes } from '@angular/router';
import { authGuard } from './auth.guard';

export const routes: Routes = [
  { path: 'login', loadComponent: () => import('./login/login.component').then(m => m.LoginComponent) },
  { path: 'register', loadComponent: () => import('./register/register.component').then(m => m.RegisterComponent) },
  // 为需要拦截的路由添加canActivate守卫
  { path: 'dashboard', loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent), canActivate: [authGuard] },
  // 其他需要拦截的路由同理配置
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];

步骤3：确保守卫在app.config中被识别

由于Angular 18使用独立组件模式，路由守卫是函数式的，无需额外注册，直接在路由配置中引用即可。

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