Angular Router.navigate() 在功能拦截器内不起作用

发布于08月02日

这是一个Angular 函数拦截器，用于管理应用程序使用期间可能出现的会话超时.

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")) {
                    // router.navigateByUrl("/login");
                    window.location.href = '/login';
                }
                return throwError(() => error);
            })
        );
};

然而，我面临着被注释掉的第router.navigateByUrl("/login")行的问题.每当执行此行时，都会出现错误:"无法匹配任何路由.URL段:‘LOGIN’."

"登录"路由确实在应用程序中定义了.

起初，我怀疑这是一个背景问题.然而，在判断代码之后，我确认路由定义正确，并且我使用的是箭头函数，这应该会保留上下文.

推荐答案

您的代码也可以正常工作.您是否已将路由导入独立组件中，如下例所示:

Note:您可以导入RouterLink、RouterLinkActive等.您不需要导入完整的RouterModule个，但您可以.

  imports: [CommonModule, RouterModule, MytestComponent],

MytestComponent是在路由中注册的组件:

bootstrapApplication(App,{
  providers: [provideHttpClient(  withInterceptors([sessionExpiredInterceptor])),
  provideRouter([{path: "", pathMatch: "full", component: App}, {path: "test", pathMatch: "full", component: MytestComponent}])]});

这也很重要.将路由、所有进口和拦截器添加到您的应用程序中.

最后但并非最不重要的一点: