Как обрабатывать ошибки от сервера?

Question

[Максим Тарабрин]

Учу angular, пишу приложения, которое могло бы общаться с сервером. Аутентификация происходит за счет токена JWT. Вот например ситуация сейчас, я направляю запрос серверу для проверки валидности токена. В ответ мне приходит ответ, из него я выдернул ошибку кое как. Но в конце при throw и возвращения observable ошибка дополнительно вываливается. Явно, не правильно обрабатываю ошибку. Подскажите гуру ангуляра и javascript'а.

authService

export class AuthService {
  backendUrl = "http://127.0.0.1:8000/";
  constructor(private http: Http,
              private router: Router) { }

  verifyToken(token: string): Observable<{}>{
    let urlVerify = 'api-token-verify'
    let headers = new Headers({'Content-Type':'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.backendUrl+'api-token-verify/', {token}, options)
      .map((response: Response) => response.json())
      .catch((error: Response) => this.handleError(error));
  }

  authLogin(login: string, password: string){
    let urlLogin = 'api/v1/auth/login';
    let headers = new Headers({'Content-Type':'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.backendUrl+urlLogin, {username: login, password: password}, options)
      .map((response: Response) => response.json())
      .catch(this.handleError);
  }

  handleError(error: any){
    this.router.navigate(['/login']);
    let err_array = error.json()
    return Observable.throw(err_array['non_field_errors']);
  }
}

authenticationGuard

export class AuthenticationGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router){
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      if(localStorage.getItem('Token')){
        let token = localStorage.getItem('Token');
        return this.authService.verifyToken(token).map(res => {
          if(res['token'] === token){
            return true;
          }
          console.log(res);
          return false;
        });
      }else{
        this.router.navigate(['/login']);
        return false;
      }
    }
}

Answer 1

[Aleksei Podgaev]

Вас не смущает два вызова this.router.navigate(['/login']); в двух местах?

Зачем вы делаете перехват ошибок в сервисе авторизации? Если роутер сам за этим должен следить - пусть он и следит. Там и ставьте перехват и обработку ошибок, а из сервиса уберите.

Comments

[Максим Тарабрин]

Ооо, ааа, ооо. Понял. Но как бы позвольте, а как роутер будет управлять? Если мы уже находимся к примеру в компоненте about, то мне же как то надо пользователя выкинуть из него, к примеру к компоненту login. Как же он сам будет управлять?

[Aleksei Podgaev]

Максим Тарабрин: Тут сложно однозначно сказать - делай так и никак иначе. Нужно смотреть на конкретную архитектуру. По идее я бы, наверное, сделал обработку ошибок авторизации в двух местах: в самом сервисе авторизации на этапе инициализации приложения. Это когда приложение стартует, берёт из кэша токен и проверяет его на валидность. А второе место - это сервис обработки всех запросов к серверу, обёртка над Http сервисом. В нём любая пришедшая с сервера ошибка авторизации вела бы к очистке токена и редиректу на страницу логина. А гард не должен по идее никаких асинхронных функций реализовывать, только проверять права доступа на страницу, загруженные ранее при логине.