Javascript 无限循环

目前正在为Angular应用程序实施刷新令牌

这是用于检查当前令牌是否过期的代码。若过期，它将尝试向服务器发送刷新令牌

loggedIn() {
  const token = localStorage.getItem('token');

  if (!this.jwtHelper.isTokenExpired(token)) {
    return true;
  }

  const isRefreshSuccess = this.tryRefreshingTokens(token);
  if(isRefreshSuccess) {
    return true;
  }
  return false;
} 

postRefresh(credentials){
  return this.http.post(this.baseUrl + "refresh", credentials);
}

private tryRefreshingTokens(token: string): boolean {
  const refreshToken: string = localStorage.getItem("refreshToken");
  const credentials = JSON.stringify({ token: token, refreshToken: refreshToken})
  let isRefreshSuccess: boolean = false;

  this.postRefresh(credentials)
    .pipe(map((res: Response) => res.json())).subscribe(
      (x : any)=> {
        localStorage.setItem('token', x.token);
        this.decodedToken = this.jwtHelper.decodeToken(x.token);
        console.log(this.decodedToken);
        localStorage.setItem('refreshToken', x.refreshToken);
    },
     error => console.log(error),
     () => console.log('completed')
  );
  return isRefreshSuccess;
  }

问题发生在导航条加载和函数调用后几秒钟。开发人员工具疯狂地向ASP.NET服务器发送数以千计的post请求并崩溃。另外需要注意的是，HTTPPOST从不返回任何内容，因此令牌/刷新令牌永远不会更新

下面是在无限循环中调用函数的HTML代码：

<div class="navbar-container">
  <div class="bg-light navbar-light" data-sticky="top">
    <div class="container">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" [routerLink]="['/']" id="logo-text">
          runmatch
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="icon-menu h4"></i>
        </button>
        <div
          class="collapse navbar-collapse justify-content-between"
          id="navbarNav"
        >
          <ul class="navbar-nav">
            <li class="nav-item">
              <a [routerLink]="['/people']" class="nav-link">Find People</a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['/clubs']" class="nav-link">Find A Club</a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['/messages']" class="nav-link">Messages</a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['/invites']" class="nav-link">Invites</a>
            </li>
          </ul>
          <ul class="navbar-nav">
            <li class="nav-item" *ngIf="!loggedIn()">
              <a [routerLink]="['/login']" class="nav-link">Sign-in</a>
            </li>
            <li class="nav-item dropdown mr-2" *ngIf="loggedIn()">
              <a
                class="nav-link dropdown-toggle dropdown-toggle-no-arrow p-lg-0"
                href="#"
                id="dropdown01"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <img
                  alt="Image"
                
                  class="avatar avatar-xs"
                />
                <!-- <span class="badge badge-danger">8</span> -->
              </a>
              <div
                class="dropdown-menu dropdown-menu-sm dropdown-menu-right"
                aria-labelledby="dropdown01"
              >
                <a
                  class="dropdown-item text-dark"
                  [routerLink]="['/user/edit']"
                  routerLinkActive="router-link-active"
                  >Profile</a
                >
                <a
                  class="dropdown-item text-dark"
                  [routerLink]="['/invites']"
                  routerLinkActive="router-link-active"
                  >Invites</a
                >
                <div class="dropdown-divider"></div>

                <a class="dropdown-item text-dark" (click)="logout()"
                  >Log out</a
                >
              </div>
            </li>
            <li class="nav-item d-flex align-items-center" *ngIf="!loggedIn()">
              <a [routerLink]="['/signup']" class="btn btn-success">Signup</a>
            </li>
          </ul>
        </div>
        <!--end nav collapse-->
      </nav>
    </div>
    <!--end of container-->
  </div>
</div>

轮廓
邀请
注销


报名

Angular lifecycle在html模板中多次运行用作布尔值的方法。当令牌无效时，您的

*ngIf=“！loggedIn（）”

会导致问题。