在 Ionic + Angular 中构建身份验证拦截器时出错

Question

I am building an app in ionic (and angular) and i need to implement an http interceptor so when the user is logged in it adds the token to the request headers.

This is my auth.interceptor class (imports not shown)

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

When i am logged and make a request to the api i get this error

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

Am i making something wrong i think the cause of the error is this because if i am not logged in the error doesn't occur.

I have already searched and couldn't find anything that helped. This code is identical to what i have in another angular application and in that app it works.

Thanks in advance to anyone who may help.

Answer 1

Try this way: import:

   import { throwError } from 'rjxs';

and

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

}