Обработка ошибок для авторизованного запроса в angular 6 с использованием перехватчика - PullRequest
Новая
       13

Обработка ошибок для авторизованного запроса в angular 6 с использованием перехватчика

0 голосов
/ 18 июня 2019

Я добавляю заголовок авторизации, используя перехватчик.Теперь в перехватчике я также проверяю только ошибку http, связанную с 401, то есть неверные учетные данные, что означает случай, когда в сервере не существует действительного токена доступа для доступа к ресурсу.Поэтому, если я получаю ошибку 401, я выхожу из системы и перенаправляю на страницу входа.Теперь для любой другой связанной с сервером ошибки я ловлю в блоке ошибок служебного вызова внутри компонента и отображаю соответствующее сообщение в пользовательском интерфейсе.Но, кажется, есть некоторая проблема, когда я выхожу из системы через перехватчик.Выход из системы и перенаправление работают нормально, но экран перестает реагировать так, как в случае с предупреждением JavaScript.

component.ts: 

 this.Servicefunction(arg).subscribe((Response: any) => {
        //somthing/
        }, (err: any) => {
            alert("Server error occured");
        });

Service.ts 

Servicefunction(arg): Observable<any> {
    let body = { "arg": arg }
    return this.httpClient.post("http://xx.xx.xx:xx/CheckExistenceOfRecord', body);
}

interceptor.ts: 

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpHeaders, HttpParams, HttpResponse, HttpErrorResponse } from "@angular/common/http";
import { Observable } from 'node_modules/rxjs';
import { CookieService } from 'ngx-cookie-service';
import { ActivatedRoute, Router } from '@angular/router';
import { AppComponent } from './app.component';
import { AuthService } from './route-auth';
import { map, catchError, filter, switchMap } from 'rxjs/operators'

@Injectable()
export class Interceptor implements HttpInterceptor {
  constructor(private cookieService: CookieService, private route: Router, private appComp: AppComponent,  private authService: AuthService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token: string = this.cookieService.get('authToken');
        const headers = new HttpHeaders().append('Authorization', token).append('Content-Type', 'application/json');
        const AuthRequest = request.clone({ headers: headers });
        return next.handle(AuthRequest).pipe(catchError((err: any, caught) => {
          if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
              console.info('err.error =', err.error, ';');
              this.authService.logout();
              this.route.navigateByUrl('');
              this.cookieService.deleteAll('/');
            }
            return Observable.throw(err);
          }
        }));
      }
  }

1 Ответ

0 голосов
/ 18 июня 2019

вы можете попробовать вот так. здесь мы используем interceptor

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(error => this.handleError(error))
    );
  }

  private handleError(error: HttpErrorResponse): Observable<any> {
     if (error.status === 401) {
      // Do your thing here      
   }         
  }
...