Angular Http Request .subscribe() 导致无限循环

Question

我想在文件 auth.service.ts 中编写一个函数 loggedIn() 来检查本地存储中的令牌，然后在服务器端用 firebase/php-jwt 验证它。但是 Typescript 中的代码给出了一个无限循环。这是我的代码：

auth.service.ts

loggedIn(){

    const token: string = localStorage.getItem('id_token');    

    if (token == null) {
      return false;
    }

    else {
      const subs = this.http.post('http://localhost/url/to/myPHP.php', {"token":token})
      .map(res=>res.json()).subscribe(data=>{
        if(data.valid){
          this.valid = true;
        } else {
          this.valid = false;
        }
      },
    err=>console.log(err));

      if (this.valid){
        console.log("Valid");
        return true;
      } else {
        console.log("Invalid");
        return false;
      }
    }
  }

给定令牌：有效令牌。
结果：没有报错，而是 'Valid' 的无限 console.log 以及 return 为真，直到 Apache 宕机。
给定令牌：无效令牌
结果：没有报错，而是无限 console.log of 'Invalid' 以及 return false，直到 Apache 宕机。

我尝试过的：

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

        if (token == null) {
          return false;
        }

        else {
          const subs = this.http.post('http://localhost/url/to/myPHP.php', {"token":token})
          .map(res=>res.json()).subscribe(data=>{
            if(data.valid){
              this.valid = true;
            } else {
              this.valid = false;
            }
          },
        err=>console.log(err));

          if (this.valid){
            console.log("Valid");
            console.log(this.valid);
            return true;
          } else {
            console.log("Invalid");
            console.log(this.valid);
            return false;
          }
          subs.unsubscribe();
          return true;
        }
      }

subs.unsubscribe(); 行确实停止了循环，但它确实会取消订阅 Observable<Response> 而 .subscribe() 中的代码不会运行。请帮忙。

编辑：loggedIn()

的用法

*ngIf="authService.loggedIn()

在导航栏组件中出现 4 次。

里面auth.guard.ts

canActivate(){
        if (this.authService.validToken){
            return true;
        } else {
            this.router.navigate(['/login']);
            return false;
        }
    }

在app.module.ts
{path:'profile', component:ProfileComponent, canActivate:[AuthGuard]}

Answer 1

我终于解决了这个问题。
我的代码的问题：.subscribe() 是一个异步调用（实际安排为 last/later 执行）。是这样的情况：
ngOnInit() : 位于组件文件中

  ngOnInit(){
    this.authService.loggedIn();
    console.log("10");
  }

loggedIn() : 位于 auth.service.ts 文件

  loggedIn(){

        const token: string = localStorage.getItem('id_token');    

        if (token == null) {
          return false;
        }

        else {
          const subs = this.http.post('http://localhost/url/to/myPHP.php', {"token":token})
          .map(res=>res.json()).subscribe(data=>{
            if(data.valid){
              console.log("1");
            } else {
              console.log("2");
            }

            console.log("3")
          },
        err=>console.log(err));
        }
      }

然后结果将是：
10
1
3
这意味着，您在订阅中所做的任何事情只有在您需要时才会改变（在许多情况下）。所以我们需要在 subscribe() 中做任何我们需要做的事情，并且只在需要的时候触发它。就我而言，如果任何更改适用于本地存储中的令牌，我想触发它。

这是我的解决方案

如我所愿，它总是检查令牌。我用了 DoCheck()

里面auth.service.ts

verifyToken(authToken) {
    const body = {token:authToken};

    return this.http.post('http://localhost/url/to/myPHP.php',body)
    .map(res => res.json());
  }


tokenExist(): boolean {
    const token: string = localStorage.getItem('id_token');

    if (token == null) {
      return false;
    } else {
      return true;
    }
  }

里面navbar.component.ts

  ngOnInit() {
    this.curToken = localStorage.getItem('id_token');
    this.loggedIn(this.curToken);
  }

  ngDoCheck(){
    if (this.curToken != localStorage.getItem('id_token')){
      this.curToken = localStorage.getItem('id_token');
      this.loggedIn(this.curToken);
    }
  }

  loggedIn(token){
    if(this.authService.tokenExist()){
      this.authService.verifyToken(token).subscribe(data=>{
        if(data.valid){
          this.validLogin = true;
        } else {
          console.log("Invalid Token");
          this.validLogin = false;
        }
      });
    } else {
      console.log("Token Missing");
      this.validLogin = false;
    }

  }

当然不要忘记在行

中实现DoCheck

export class NavbarComponent implements OnInit, DoCheck

Angular Http Request .subscribe() 导致无限循环

Angular Http Request .subscribe() cause an infinite loop

post

http

token

jwt

angular5