각도 HTTP 요청 .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; 
     } 
    } 
    } 

을 감안할 때 토큰 : 유효한 토큰 여기 내 코드입니다.
결과 : Apache를 종료 할 때까지 오류는 발생시키지 않고 'Valid'의 무한 console.log를 반환하고 true를 반환합니다.
주어진 토큰 : 유효하지 않은 토큰
결과 : Apache를 종료 할 때까지 오류는 발생하지 않지만 '유효하지 않은'무한 console.log와 false를 반환합니다. 내가 시도 무엇

:

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() 내부의 코드가 실행되지 않습니다을 취소합니다. 도와주세요.

편집 : 메뉴 바 구성 요소의 4 배에 loggedIn()

*ngIf="authService.loggedIn() 

의 사용.

{path:'profile', component:ProfileComponent, canActivate:[AuthGuard]}

Answer 1

app.module.ts에서 auth.guard.ts

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

내부 드디어 문제를 해결한다.
문제 : .subscribe()은 비동기 호출입니다 (실제로 마지막/나중에 실행되도록 예약 됨).
ngOnInit() : 구성 요소 < TS에 있습니다> 파일

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)); 
     } 
     } 

와에 위치한이 상황입니다 결과는 다음과 같습니다.
즉, 구독을 할 때 필요한 모든 작업은 필요한 후에 만 ​​바뀝니다 (많은 경우). 그러므로 우리는 우리가해야 할 일을 subscribe() 안에해야하고 필요할 때만 해고해야합니다. 내 경우에는 로컬 저장소 내부의 토큰에 변경 사항이 적용되면 실행하려고합니다.

이

내가 항상 토큰 확인하려는 것처럼 내 솔루션

입니다.나는 선에 DoCheck을 구현하는 것을 잊지 마세요 물론

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; 
    } 

    } 

navbar.component.ts 내부 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; 
    } 
    } 

내부 DoCheck()

을 사용

export class NavbarComponent implements OnInit, DoCheck