Как я могу перенаправить на страницу входа в ответ 401 в Angular 5? - PullRequest
Новая
       7

Как я могу перенаправить на страницу входа в ответ 401 в Angular 5?

0 голосов
/ 25 июня 2018

Я работаю над приложением Angular 5, использующим неявный поток OAuth2.

У меня есть службы, которые выполняют HTTP-вызовы, следуя одному примеру моих служб: 

@Injectable()
export class MyService {

  constructor(public http: HttpClient) { }

  public getAll(): Observable<Persona[]> {
    return this.http.get<Persona[]>("http://mywebservice/persone");
  }
}

Яиспользование перехватчиков для авторизации и добавления пользовательских атрибутов.После моего перехвата аутентификации: 

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() {

  }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let accessToken = sessionStorage.getItem("access_token");
    if(accessToken)
    {
        request = request.clone({
        setHeaders: {
            Authorization: `Bearer ${accessToken}`
        }
        });
    }

    return next.handle(request);
  }
}

И следуя тому, как я использую свои услуги: 

public myMethod() {
    this.myService.getAll().subscribe(
        result => {
            console.log(result);
        }, error => {
            // I don't want add redirection there...
            console.error(error);
        });
}

Теперь мне нужно, чтобы, когда любой HTTP-вызов получил результат 401, приложение перенаправляло пользователя настраница авторизации.

Как мне получить этот результат без дублирования кода?

Большое спасибо

Ответы [ 3 ]

0 голосов
/ 25 июня 2018

Я решил проблему с заменой перехватчика следующим образом: 

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() {

  }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let accessToken = sessionStorage.getItem("access_token");
    if(accessToken)
    {
        request = request.clone({
        setHeaders: {
            Authorization: `Bearer ${accessToken}`
        }
        });
    }

    return next.handle(request).do((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
            this.router.navigate(['login']);
        }
      }
    });
  }
}

Я нашел решение там: https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

0 голосов
/ 09 марта 2019

Только для поддержки новых читателей, обратите внимание, что в angular 7 вы должны использовать pipe () вместо do () или catch (): 

return next.handle(request).pipe(catchError(err => {
    if (err.status === 401) {
        MyComponent.logout();
    }
    const error = err.error.message || err.statusText;
        return throwError(error);
}));
0 голосов
/ 25 июня 2018

Присоедините обработку ошибок к общему обработчику запросов: 

return next.handle(request).catch(err => {
    if (err.status === 401) {
         // Redirect here
    }
}

Вы можете импортировать маршрутизатор непосредственно в перехватчик, но правильный способ сделать это - создать службу аутентификации или аналогичную, которая импортируетмаршрутизатор и вызовите его, чтобы сделать перенаправление

...