HttpInterceptor 和 In memory 数据服务 Angular 7

Question

I have been using a dummy auth for an app I am working on. So I have implemented this successfully using a dummy local user.

Unfortunately I have hit a brick wall when it comes to trying to get this to work with the in memory data service. My users array is coming back undefined and a unable to change error to string in the console log. Below is the fake back end using the interceptor.

import { Injectable, OnInit } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';

import { User } from '@/data/models/property/user';
import { UserService } from '@/_services/user.service';

@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor, OnInit {

  users: User[];

  constructor(private http: HttpClient, private userService: UserService) { }

  ngOnInit() {
    this.getAll();
  }
  private getAll(): void {
    this.userService.getAll()
      .subscribe(data => this.users = data);
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // authenticate
    if (request.url.endsWith('/users/authenticate') && request.method === 'POST') {
    // find if any user matches login credentials
      const filteredUsers = this.users.filter(user => {
        if (user.email === request.body.email && user.password === request.body.password) {
        return user;
        }
      });

    if (filteredUsers) {
      // if login details are valid return 200 OK with user details and fake jwt token
      const user = filteredUsers[0];
      const body = {
        id: user.id,
        email: user.email,
        firstName: user.firstName,
        lastName: user.lastName,
        studentNo: user.studentNo,
        isStaff: user.isStaff,
        token: 'fake-jwt-token'
      };

    return of(new HttpResponse({ status: 200, body: body }));
      } else {
        // else return 400 bad request
        return throwError({ error: { message: 'Email or password is incorrect' } });
      }
    }
    return next.handle(request);

  }
}

and next is my user service.

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { User } from '../data/models/property/user';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) { }

  getAll(): Observable<User[]> {
    return this.http.get<User[]>('api/users')
      .pipe(
        catchError(this.handleError('getAll', []))
      );
  }

  getById(id: number) {
    return this.http.get(`/users/${id}`);
  }

  register(user: User) {
    return this.http.post(`/users/register`, user);
  }

  update(user: User) {
    return this.http.put(`/users/${user.id}`, user);
  }

  delete(id: number) {
    return this.http.delete(`/users/${id}`);
  }

  private handleError<T>(operation = 'operation', result ?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error.name); // log to console instead

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}

I suspect this is something I have missed or unsure on. Any help gratefully received.

EDIT: When debugging I am getting a RangeError: Maximum call stack size exceeded

Answer 1

return the error through hadlers catch

intercept(request: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
    // authenticate
    if (request.url.endsWith('/users/authenticate') && request.method === 'POST') {
        // find if any user matches login credentials
        const filteredUsers = this.users.filter(user => {
            if (user.email === request.body.email && user.password === request.body.password) {
                return user;
            }
        });

        if (filteredUsers) {
            // if login details are valid return 200 OK with user details and fake jwt token
            const user = filteredUsers[0];
            const body = {
                id: user.id,
                email: user.email,
                firstName: user.firstName,
                lastName: user.lastName,
                studentNo: user.studentNo,
                isStaff: user.isStaff,
                token: 'fake-jwt-token'
            };

            let response = of (new HttpResponse({
                status: 200,
                body: body
            }));
            return handle(response);
        } else {
            // else return 400 bad request
            next.handle().catch((response: any) => {
                // ....
                // Do messaging and error handling here
                return throwError({
                    error: {
                        message: 'Email or password is incorrect'
                    }
                });
            });
        }
    }
}

Answer 2

This is old, but I think you don't understand what an HTTP interceptor is supposed to do. You shouldn't call the getAll() service method in your interceptor, and definitely not in the ngOnInit() , which has no place there anyway, interceptors are not components. The only thing your interceptor needs to do is assign the response of the faked back-end request to some local data that you can store and export in some local file as a simple JSON object.