错误错误：未捕获(在承诺中)：类型错误：无法读取 Angular 7 和 rxjx 中未定义的属性'length'

Question

我最近将angular 2应用程序升级为angular 7。我遇到的一个挑战是user.service.ts，我有isAuthentiated方法。基本上，这个方法被传递到auth.guard.ts中，这样我就可以在用户的用户名不在我的列表中时指导他们。

用户服务检索用户，然后isAuthenticated检查用户。身份验证保护正在检查用户。如果用户在列表中，则授予访问权限，否则将其导航到某个网站。

user.service.ts

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { map, catchError, tap } from 'rxjs/operators';
import { HttpClient  } from '@angular/common/http';
import { Observable, of } from 'rxjs';
@Injectable()
export class UserService {
baseUrl = environment.apiUrl;
constructor(private http: HttpClient) { }
private extractData(res: Response) {
const body = res;
return body || { };
}
... other methods
isAuthenticated(): Observable<boolean> {
return this.http.get(this.baseUrl + 'users').pipe(
map(this.extractData),
map(res => !!res.length)
);
}
}

我的auth.guard.ts是：

import { UserService } from './../_services/user.service';
import { Injectable } from '@angular/core';
import { CanActivate, RouterStateSnapshot, Router } from '@angular/router';
import { AlertifyService } from '../_services/alertify.service';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private userService: UserService,
private alertifyService: AlertifyService,
private router: Router
) {}
canActivate(route, state: RouterStateSnapshot) {
return this.userService.isAuthenticated().pipe(map(user => {
if (!user) {
return true;
} else {
this.router.navigate(['/authentication/get-jhed']);
this.alertifyService.error('You need to be authenticated to access this area');
return false;
}
}));
}
}

此代码返回以下错误：

错误错误：未捕获(承诺中(：TypeError：无法读取未定义的属性"length">

我尝试了res[0].length，但没有收到错误，但这次什么也没发生。

我可以使用Http解决这个问题，如下所示：

isAuthenticated(): Observable<boolean> {
return this.http.get(this.baseUrl + 'users').pipe(
map(res => res.json()),
map(res => !!res.length)
);
}

请注意，我在这里使用的是Http，而不是HttpClient。

任何帮助都将不胜感激！

Answer 1

HttpClient默认表示响应主体，而不是整个响应对象。如果同时从Http迁移到HttpClient(为了与前面的方式兼容(，请使用options对象在回调中返回整个响应。

isAuthenticated(): Observable<boolean> {
return this.http.get(this.baseUrl + 'users', { observe: 'response' }).pipe(
map(this.extractData),
map(res => !!res.length)
);
}