How to Fix: "RangeError: Maximum call stack size exceeded" in angular7 when passing token as parameter

Question

我正在尝试完成 "Password Recover" 功能。密码重置 URL 包含电子邮件参数和令牌（使用 GeneratePasswordResetTokenAsync(TUser) dotnet 核心身份函数生成）。现在的问题是，每当重置 URL 在浏览器上加载时，它都会给出：RangeError: Maximum call stack size exceeded

Screenshot attached

为了找出问题所在，我从 url 中删除了令牌，并在代码中的一个变量中进行了硬编码以观察结果，但它工作得非常好，没有任何例外。

此外，组件中没有可能导致问题的循环依赖。我不明白是什么导致了这个问题。 screenshot attached PS：我在前端使用 Angular 7，在后端使用 C#

EDIT：在进一步调查中，我发现每当令牌在令牌字符串之间包含 (%2) 时就会发生异常{当我用 "System.Web.HttpUtility" 编码 URL } 或 / {当我不执行编码时}

See Image

URL有什么限制吗？来自 app.component.ts

的代码片段

setTimeout(() => {
  if (this.isUserLoggedIn) {
    this.alertService.resetStickyMessage();
    this.checkAvailableStocks();
    if (this.isUserLoggedIn && this.UserRole == 'Worker/Staff' && !this.storageManager.getData(DBkeys.SELECTED_COMPANY)) {
      let dialogRef = this.dialog.open(CompanyDialogeComponent, {

        //width: '800px',
        data: {},
        disableClose: true
      });

      dialogRef.afterClosed().subscribe(result => {

      });
    }
    //if (!this.authService.isSessionExpired)
    this.alertService.showMessage("Login", `Welcome back ${this.userName}!`, MessageSeverity.default);
    //else
    //    this.alertService.showStickyMessage("Session Expired", "Your Session has expired. Please log in again", MessageSeverity.warn);
  }
}, 2000);


this.alertService.getDialogEvent().subscribe(alert => this.showDialog(alert));
this.alertService.getMessageEvent().subscribe(message => this.showToast(message, false));
this.alertService.getStickyMessageEvent().subscribe(message => this.showToast(message, true));
this.authService.reLoginDelegate = () => this.shouldShowLoginModal = true;
this.authService.getLoginStatusEvent().subscribe(isLoggedIn => {
  this.isUserLoggedIn = isLoggedIn;


  if (this.isUserLoggedIn) {
    this.initNotificationsLoading();
  }
  else {
    this.unsubscribeNotifications();
  }

  setTimeout(() => {
    if (!this.isUserLoggedIn) {
      this.alertService.showMessage("Session Ended!", "", MessageSeverity.default);
    }
  }, 500);
});

this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
    let url = (<NavigationStart>event).url;

    if (url !== url.toLowerCase()) {
      this.router.navigateByUrl((<NavigationStart>event).url.toLowerCase());
    }
  }
});

Answer 1

我在使用 dotnet core 开发 Angular 时遇到过类似的问题。

您应该从应用程序组件中删除这段代码，因为这段代码将 dotnet core 生成的密码重置令牌变成小写并在小写后重定向

this.router.events.subscribe(event => {
 if (event instanceof NavigationStart) {
let url = (<NavigationStart>event).url;

if (url !== url.toLowerCase()) {
  this.router.navigateByUrl((<NavigationStart>event).url.toLowerCase());
}
  }
});

How to Fix: "RangeError: Maximum call stack size exceeded" in angular7 when passing token as parameter

How to Fix: "RangeError: Maximum call stack size exceeded" in angular7 when passing token as parameter

.net-core

angular7

password-recovery