Angular函数式拦截器中Router.navigateByUrl无法正常工作问题排查

可能的原因及对应解决方法 #

1. 路由路径配置不匹配

先确认你的路由配置文件（如app-routing.module.ts）中，login路由的路径是否为顶级路径，且没有拼写错误：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  // 其他路由配置
];

如果login路由属于某个懒加载模块，确保该模块的路由已正确导入，且路径前缀没有冲突（比如不要出现/app/login却用/login跳转的情况）。

2. 尝试改用router.navigate方法

navigateByUrl对绝对路径的解析有时会出现上下文问题，换成数组形式的navigate方法试试：

// 替换原来的router.navigateByUrl("/login")
router.navigate(['/login']);

3. 避免重复导航触发异常

如果多个请求同时返回401，会重复触发导航操作导致路由报错，添加一个标志位控制导航行为：

let isNavigatingToLogin = false;

export const sessionExpiredInterceptor: HttpInterceptorFn = (req, next) => {
    const router: Router = inject(Router);
    return next(req)
        .pipe(
            catchError((error: HttpErrorResponse): Observable<never> => {
                if (error.status === 401 && !req.url.includes("login") && !isNavigatingToLogin) {
                    isNavigatingToLogin = true;
                    router.navigate(['/login']).finally(() => {
                        isNavigatingToLogin = false;
                    });
                }
                return throwError(() => error);
            })
        );
};

4. 排查路由守卫的影响

检查LoginComponent所在路由是否配置了CanActivate等守卫，是否存在守卫逻辑阻止了导航；同时确认全局路由守卫（如CanActivateChild）是否对/login路径进行了拦截。

5. 验证路由配置是否加载

可以在导航前打印路由配置，确认login路由已被正确加载：

console.log(router.config); // 查看输出中是否包含path为'login'的路由项

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