Как перехватить 401 посторонних и добавить новый код авторизации?

Question

Я хочу обнаружить код ответа 401 для моего HTTP-запроса в одном компоненте:

@Injectable()
export class InterceptorProvider implements HttpInterceptor {

  constructor(private authService: AuthenticationService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      console.log(request);
      return next.handle(request);
  }

Как я могу отловить ошибку, выполнить запрос на обновление токена и позволить другому компоненту продолжить, если код ответав порядке?

ОБНОВЛЕНИЕ

@Injectable()

Класс экспорта InterceptorProvider реализует HttpInterceptor {

constructor(private authService: AuthenticationService, private storage: Storage) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log(request);
  return next.handle(request)
    .pipe(tap(event => {
        if (event instanceof HttpResponse) {
        }
      }, err => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401) {

            console.log(err);
            console.log("Retriving user....");
           let user = new User();
this.storage.get('username').then((result)=>{
  console.log(result);
  user.username = result;
  let pass = this.storage.get('password').then((result)=>{
    console.log(result);
    user.password = result;
    console.log(user.username);
console.log(user.password);

  console.log("user ok");
  this.authService.login(user.username, user.password).toPromise().then(response=>{
    let token = response['message'];
    this.storage.set('token', token);
    this.addToken(request, token);
    return next.handle(this.addToken(request, token));
  });

  });
});
          }
        }
      })
    )
}

// Adds the token to your headers if it exists
private addToken(request: HttpRequest<any>, token: any) {
    if (token) {
        let clone: HttpRequest<any>;
        clone = request.clone({
            setHeaders: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                Authorization: token
            }
        });
        return clone;
    }

    return request;
}

}

Эта новая версиявыполняет операцию повторного входа в систему, но она не идет дальше, похоже, возникает проблема с повторением исходного запроса, добавленного с новым токеном доступа;где я не прав?

ОБНОВЛЕНИЕ

Это ошибка консоли:

core.js:9110 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"Unauthorized","url":"https://www.fantacalciopizza.it/php/formazioniinviatejson2.php","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://www.fantacalciopizza.it/php/formazioniinviatejson2.php: 401 Unauthorized","error":"\n\n"}
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
at invokeTask (zone-evergreen.js:1603)

Затем есть попытка входа в систему, я получилответ, но клонированный запрос не выполняется;где я не прав?

Answer 1

Попробуй так:

 return next.handle(authRquest)
        .pipe(
          tap(event => {
            if (event instanceof HttpResponse) {
            }
          }, err => {
            if (err instanceof HttpErrorResponse) {
              if (err.status === 401) {
                // handle error
              }
            }
          })
        )

Answer 2

После регистрации UnauthorizedInterceptor в поставщиках корневого модуля он автоматически обнаружит 401 403 ошибки

В unauthorized.interceptor.ts

@Injectable()
export class UnauthorizedInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if ([401, 403].indexOf(err.status) !== -1) {               
                // YOUR  MESSAGE
            }

            const error = err || err.statusText;
            return throwError(error);
        }))
    }
}

В AppModule.ts

@NgModule({
    ...,
   providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: UnauthorizedInterceptor,
      multi: true
    }]
})

Answer 3

Я обычно делаю это на перехватчике:

return next.handle(req).pipe(
    tap<HttpResponse<any>>(
        res => {
            // Logic if response is ok
        },

        err => {
            // Logic if response is not ok

            if(err.status === 401) {
                // Handle the error
            }
        }
    )
)