Ошибка построения аутентификации перехватчика в Ionic + Angular

Question

Я создаю приложение в ионном (и угловом) формате, и мне нужно реализовать http-перехватчик, чтобы при входе пользователя он добавлял токен в заголовки запроса.

Это мой auth.interceptorкласс (импорт не показан)

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(
        private auth: AuthService,
        private router: Router,
        private storage: NativeStorage,
        ) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // Clone the request to add the token header
        if(this.auth.isLoggedIn()) {
            this.storage.getItem('token').then(data => {
                const token = data as any;
                console.log(token);
                const authReq = req.clone({ setHeaders: {
                    'x-access-token': token
                  }});
                console.log(authReq);
                // Send the newly created request
                return next.handle(authReq).pipe(
                    catchError((err: HttpErrorResponse) => {
                        console.log(err);
                        // Checks if error was caused due to invalid/expired token
                        if (err instanceof HttpErrorResponse && err.status === 401) {
                            this.router.navigate(['/login'], { queryParams: { sessionExpired: true } });
                        }
                        return throwError(err);
                    }) as any
                );
            })
        }
        else {
            return next.handle(req);
        }
    }
}

Когда я вошел в систему и сделал запрос к API, я получил эту ошибку

ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Я делаю что-то неправильно, я думаю, что причинаошибка в том, что, если я не вошел в систему, ошибка не произойдет.

Я уже искал и не смог найти ничего, что помогло. Этот код идентичен тому, что у меня есть в другом угловом приложении, и в этом приложении он работает.

Заранее спасибо всем, кто может помочь.

Answer 1

Попробуйте следующим образом: импорт:

   import { throwError } from 'rjxs';

и

 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const reqWithCredentials = req.clone({withCredentials: true});
return next.handle(reqWithCredentials)
 .pipe(
    catchError(error => {
      if (error.status === 401 || error.status === 403) {
        // handle error
        this.router.navigate(['/login'], { queryParams: { sessionExpired: true } });
      }
      return throwError(error);
    })
 );

}