错误错误：未捕获（承诺）：TypeError：无法读取Angular 7和rxjx中未定义的属性“ length”

Question

I have recently upgraded my angular 2 app to angular 7. One of the challenges that I had was the user.service.ts where I have isAuthentiated method is. Basically, this method is passed into the auth.guard.ts so that I can direct users if their username is not on my list.

User Service retrieves the users then isAuthenticated checks the users. Auth guard is checking the user. If the user is in the list, grant access, otherwise navigate them to a certain website.

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

And my auth.guard.ts is:

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

This code returns the following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined

I tried res[0].length I didn't receive the error but nothing happened this time.

I am able to solve this issue using Http as below:

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

Please note that I use Http in here, NOT HttpClient .

Any help would be appreciated!

Answer 1

HttpClient by default indicates response body not a whole response object. If you migrate from Http to HttpClient at the same time - to be compatibile with the previous way - use options object to return whole response in callback.

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