令牌在Angular 4中過期時會靜音登錄嗎？

Question

我使用下面的代碼，但是它不起作用。

當我進入主頁時，該日志未按我的意願顯示（在控制台日志中，它顯示：首先是最后一個，最后是第二個），因此它總是返回無效的令牌，因為它沒有按順序運行。 我不知道我在哪里錯。 請幫我。 謝謝你們 ！

logIn(identifi : string, password : string ) {
    let headers = new Headers();
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Access-Control-Allow-Methods', '*');
    headers.append('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');    
    let body = {
      "user_id" : identifi,
      "password" : password
    };
    let options = new RequestOptions({ headers: headers });
    return this.http.post(api.logIn, body, options).map((res:Response) => res.json());
  }  

  checkToken() {
    this.storage.get('user').then((user) => {
      if(user) {
        this.token = user.token;
        this.token_date = user.token_date - 100;
        this.currentDate = new Date();
        this.expDate = new Date(this.token_date * 1000);
        if (this.currentDate <= this.expDate) {
          // token expired, login again     
          console.log('first');  
          this.logIn(user.user_id, user.password).subscribe(
            data => {
              this.storage.set("user", userInfo);  
              console.log('second');
              return  userInfo.token;
            },
            err => {
              console.log(err);
            });
        }
      }
    })
  }

  getDataHomepage(retailerId: number,pageIndex: number) {
    this.checkToken();
    console.log('last');
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + this.token);
    let options = new RequestOptions({ headers: headers });
    return this.http.get(api.promotion + '?retailer_id=' + retailerId + '&page=' + pageIndex, options).map((res:Response) => res.json());
  }

Answer 1

您的問題是您正在getDataHomepage中調用checkToken（），而不是等待它完成並向前調用get data主頁。 （javascript不會等待checkToken（）完成，但是它將前進並調用getDataHomepage中的get）

您必須在登錄后從主頁調用this.http.get數據，並在登錄后用“ after”表示。 或者嘗試使用“flatMap”描述票數

您代碼中的第二個可疑位置向我展示了這一部分：

        if (this.expDate === this.currentDate) {
      // token expired, login again  

我認為您必須使用<=或> =代替===，但必須對此進行測試。

Answer 2

快速瀏覽后，您發現約會有誤。 您說，如果date = date，您最好做的是：

if(this.currentDate <= this.expDate){
//login }
else{
//logout with expired message }

或反之亦然。

您通常用來終止該會話的會話，因此它不會永遠存在。 如果不讓它過期，為什么要進行會話？

Answer 3

就像我說的那樣，您有兩個錯誤，現在您要更改的是第二個問題的解決方案（也許我不知道，您必須對其進行測試），第一個問題是您必須調用checkToken，login和getDataHompage作為嵌套的Observables是這樣的：

      logIn(identifi : string, password : string ) {
      let headers = new Headers();
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Access-Control-Allow-Methods', '*');
      headers.append('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');    
      let body = {
        "user_id" : identifi,
        "password" : password
      };
      let options = new RequestOptions({ headers: headers });
      return this.http.post(api.logIn, body, options).map((res:Response) => res.json());
    }  

    checkToken() {
      this.storage.get('user').then((user) => {
        if(user) {
          this.token = user.token;
          this.token_date = user.token_date - 100;
          this.currentDate = new Date();
          this.expDate = new Date(this.token_date * 1000);
          if (this.currentDate <= this.expDate) {
            // token expired, login again     
            console.log('first');  
            return this.logIn(user.user_id, user.password).map((res:Response) => res.json());
              /*  .subscribe(
                  data => {
                    this.storage.set("user", userInfo);  
                    console.log('second');
                    return  userInfo.token;
                  },
                  err => {
                    console.log(err);
                  });*/
          }else{
            return Observable.of(user);
          }
        }
      })
    }

    getDataHomepage(retailerId: number,pageIndex: number) {
      this.checkToken().subscribe((res)=>{
        console.log('last');
        let headers = new Headers();
        headers.append('Authorization', 'Bearer ' + this.token);
        let options = new RequestOptions({ headers: headers });
        return this.http.get(api.promotion + '?retailer_id=' + retailerId + '&page=' + pageIndex, options).map((res:Response) => res.json());
      },(err)=>{});
    }

只是有一個想法，對於優雅的解決方案，使用flatMap和forkJoin就像描述的hier