时间戳

首页 > 解决方案 > 如何使用新的 httpClient 以角度处理未经授权的请求（状态为 401 或 403）

angular - 如何使用新的 httpClient 以角度处理未经授权的请求（状态为 401 或 403）

问题描述

我有守卫我的主页，如下所示。checkTokenValidation是我从服务器检查令牌验证的一种方法。当服务器响应为 false 时，我的代码似乎停止了，里面的所有东西map都不再起作用了。

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

    return this.authService.checkTokenValidation().pipe(
      map((data) => {
          if (data['ok']) {
            this.router.navigate(['/overview']);
            return false;
          } else {
            return true;
          }
        },
        (error: string) => {
          console.log(error);
        })
    );
  }

这是我的checkTokenValidation代码：

 checkTokenValidation() {
 const token = this.getToken();
    return this.httpClient.get('http://185.69.54.21/back_end/web/site/check-token', {
      headers: new HttpHeaders().append('Authorization', `Bearer ${token}`)
    });
  }

标签： angularangular-httpclient

解决方案

问题

疑似问题是——

  1. 通过警卫导航。所以最好从那里删除。

  2. 我猜情况是错误的。如果数据正常，则应返回 true，否则返回 false；

  3. 如果出现错误，则返回 false；

修改后的代码

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

    return this.authService.checkTokenValidation().pipe(
      map((data) => {
          if (data['ok']) {
            //this.router.navigate(['/overview']); //<-- remove this.
            return true; //<- return true if response is ok
          } else {
            return false;  //<- return false if response is not ok
          }
        },
        (error: string) => {
          console.log(error);
          return false;   //<- return false in case of error
        })
    );
  }

推荐阅读