Question

我想在文件loggedIn()中编写一个函数auth.service.ts来检查来自本地存储的令牌，然后在服务器端使用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;
      }
    }
  }

给定令牌：有效令牌。
结果：没有错误但是无限的console.log'有效'以及返回true，直到Apache关闭给定令牌：无效令牌
结果：没有错误但是无效的console.log“无效”以及返回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()是异步调用（实际安排在上次/稍后执行）。情况如此： ngOnInit()：位于组件＆lt; ts＆gt;文件

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

位于auth.service.ts文件中的

loggedIn()

  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 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（）导致无限循环

1 个答案: