Angular中router.navigate调用失败：TypeError报错求助

架构老林

2026-6-25

问题解决：TypeError: router1.navigate is not a function

问题原因

错误提示明确说明传入logout函数的router1不是有效的Angular Router实例。虽然你在类的构造函数中已经注入了Router，调用logout时也传入了this.router，但这种额外传参的写法完全冗余，还可能因实例未正确初始化、意外覆盖等情况引发错误。

解决方案

方案1：移除冗余参数，直接使用类内注入的Router实例

修改logout函数，去掉router1参数，直接调用构造函数中注入的this.router：

constructor(
    private router: Router,
) {}

logout() {
  this.refreshTokenInProgress = false;
  PreAngular.clearAll();
  localStorage.clear();
  if (window.location.href.indexOf("/public/login") === -1) {
    this.router.navigate(["/public/login"]);
  }
}

同时修改sendRequest中的调用方式：

sendRequest(
    request: HttpRequest<any>,
    next: HttpHandler,
    isCacheable: Boolean,
) {
    return next.handle(request).pipe(
      catchError((error) => {
        if (error.status === 401 || (error.error != null && error.error.code == "0101")) {
          this.logout(); // 不再传递router参数
          return throwError(error);
        }
      }),
    );
}

方案2：优化路由判断逻辑（可选）

用Angular Router自身API判断当前路由，比直接操作window.location.href更可靠，避免路径匹配的潜在问题：

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

logout() {
  this.refreshTokenInProgress = false;
  PreAngular.clearAll();
  localStorage.clear();
  // 用router.url获取当前路由路径
  if (!this.router.url.includes("/public/login")) {
    this.router.navigate(["/public/login"]);
  }
}