Angular如何从http get请求中获取结果答案

【问题标题】：Angular How to get result from http get requestAngular如何从http get请求中获取结果
【发布时间】：2018-12-15 01:44:54
【问题描述】：

我想做什么：

向服务器发送标头中带有令牌的 get 请求
根据令牌使服务器返回 false 或 true
然后根据服务器的响应，我让用户访问页面与否

我正在努力解决的问题：

我挑战从服务器取回结果，但由于异步请求，我找不到如何利用它

这是我的代码：

isTokenValid(token: string) : boolean {

    const httpOptions = {
        headers: new HttpHeaders({
          'Authorization': token
        })
    };


    this.httpClient
    .get<boolean>('http://localhost:8080/getValueWithToken', httpOptions)
    .subscribe(
    (response) => {
        this.responseFromServer = response;
    },
    (error) => {
        console.log('Error:', error);
    }
    );

    /*
    while(this.isResponseReceived == false){
    }*/

    return this.responseFromServer;
}

问题是在 this.responseFromServer = response; 之前执行了返回行所以我不知道如何返回 this.responseFromServer :(

这里是我使用 isTokenValid 函数的地方：

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> |boolean {

  //console.log(this.tokenService.isTokenValid(route.params['token']));


  if(this.tokenService.isTokenValid(route.params['token']) == true) {
    return true;
  } else {
    this.router.navigate(['/errorToken']);
  }}

任何帮助将不胜感激:)

【问题讨论】：

如果你使用真正的令牌，你应该使用@auth0/angular-jwt，它可以简单地解码你的令牌并检查它是否有效。这样可以避免对后端的 HTTP 调用 ...
我在我的后端（Spring/Java）中使用 jjwt 创建令牌，但我对你的答案有点困惑，检查令牌不是后端角色吗？只有后端知道密钥
不，令牌只是一个带有签名的字符串。例如，您可以复制您的令牌并将其粘贴 there 并查看它包含的内容。根据我的评论，如果令牌已过期或无法解码，那么您的令牌无效。

标签： angular asynchronous httprequest get-request

【解决方案1】：

为什么不直接在 HTTP 调用中返回？

return this.httpClient
.get<boolean>('http://localhost:8080/getValueWithToken', httpOptions);

然后在组件里面或者哪里订阅，然后监听value+error？在服务中只返回 observable。但是，如果您不希望这样，那么只需在服务中的订阅中返回，例如：

    this.httpClient
         .get<boolean>('http://localhost:8080/getValueWithToken', 
         httpOptions).subscribe(value=>{
               return value;
        }, error=>{// do something with error });

【讨论】：

【解决方案2】：

isTokenValid(): Promise<boolean> {

    return new Promise<boolean>((resolve, reject) => {

    const httpOptions = {
        headers: new HttpHeaders({
            'Authorization': token
        })
    };

    this.httpClient
        .get<boolean>('http://localhost:8080/getValueWithToken', httpOptions)
        .subscribe(
            (response) => {
                resolve(response);
            },
            (error) => {
                console.log('Error:', error);
                reject(error);
            }
        );

    });
}

然后

this.tokenService.isTokenValid(route.params['token']).subscribe(
result : boolean => {
    if (result == true)
        return true;
    else
        this.router.navigate(['/errorToken']);
});

【讨论】：

感谢您的回答，但它似乎不起作用，这是我输入 URL“localhost:8080/getValueWithToken”时得到的结果未捕获（承诺）：TypeError：无法读取属性“订阅”未定义的类型错误：无法读取未定义的属性“订阅”...
哦，对了。您还必须更改 isTokenValid 才能返回 Promise.
不可能订阅承诺。感谢您和承诺，我找到了解决方案（我已发布）

【解决方案3】：

这是我找到的解决方案：

在第一个文件中：

isTokenValid(token: string) {

    return new Promise((resolve, reject) => {

    const httpOptions = {
        headers: new HttpHeaders({
            'Authorization': token
        })
    };

    this.httpClient
        .get<boolean>('http://localhost:8080/getValueWithToken', httpOptions)
        .subscribe(
            (response) => {
                resolve(response);
            },
            (error) => {
                console.log('Error:', error);
                reject(error);
            }
        );

    });
}

然后在第二个文件中：

async canActivate(route: ActivatedRouteSnapshot)  {


  this.reponse = await this.tokenService.isTokenValid(route.params['token']); 

  if(this.reponse)
    return true;
  else
    this.router.navigate(['/errorToken']);

}

感谢您的帮助！

【讨论】：