Angular2でのRESTサービスの例外処理

Question

まず、私はAngularの初心者だと言及しなければならず、私はサンプルコードに固執しています。

ユーザー名とパスワードの入力を求める簡単なログインアプリケーションを作成しました。ログイン成功時にトークンを返すlogin RESTサービス（Javaで書かれたもの）を呼び出します。

ここにいくつかのコードがあります。

ログインコンポーネント：

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { AuthenticationService } from '../_services/index'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html' 
}) 

export class LoginComponent implements OnInit { 
    model: any = {}; 
    error = ''; 

    constructor(
     private router: Router, 
     private authenticationService: AuthenticationService) { } 

    ngOnInit() { 
     // reset login status 
     this.authenticationService.logout(); 
    } 

    login() { 
     this.authenticationService.login(this.model.username, this.model.password) 
      .subscribe(result => { 
       if (result === true) { 
        this.router.navigate(['/']); 
       } else { 
        this.error = 'Login failed!'; 
       } 
      }, 
      err => { 
       this.error = 'Login failed!'; 
      }); 
    } 
} 

認証サービス：

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import { CookieService } from 'angular2-cookie/core'; 
import { CookieOptionsArgs } from 'angular2-cookie/services/cookie-options-args.model'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class AuthenticationService { 
    public token: string; 

    constructor(private http: Http, private cookieService: CookieService) { 
     // set token if saved in cookie 
     this.token = cookieService.get('token'); 
    } 

    login(username, password): Observable<boolean> { 
     return this.http.post('http://localhost:9081/MyApp/login?username=' + username + '&password=' + password, new RequestOptions({})) 
      .map((response: Response) => { 
       // login successful if there's a token in the response 
       let token = response.text(); 
       if (token !== '-1') { 
        // set token 
        this.token = token; 

        // store token in cookie to keep user logged 
        let opts: CookieOptionsArgs = { 
         path: '/' 
        }; 
        this.cookieService.put('token', token, opts); 

        // return true to indicate successful login 
        return true; 
       } else { 
        // return false to indicate failed login 
        return false; 
       } 
      }); 
    } 

    logout(): void { 
     // clear token, remove cookie to log user out 
     this.token= null; 
     this.cookieService.remove('token'); 
    } 
} 

すべてが期待どおりに動作します。ログインが成功すると、トークンが返され、 "home"ページにリダイレクトされます。それ以外の場合は、ログインページに「ログイン偽装」というメッセージが表示され、リダイレクトは行われません。私が気になるのは、なぜログインが失敗するのか正確にはわからないということです。ユーザー名が存在しないか、パスワードが間違っている可能性があるからです。 RESTサービスによってスローされた例外を処理する適切な方法は何ですか？私は、認証サービスが適切な場所だと仮定しますが、私はそれを行う方法を正確には分かりません。私は要求オブジェクトからいくつかの情報を抽出しようとしましたが、例外がスローされた場合にはリクエストのマッピングは行われません。

ありがとうございました！

Answer 1

AuthenticationServiceのエラーログイン時に発生した例外をキャッチしたいと思うようです。それはケースだ場合は、この主題のように、.MAP後.catchセクションを追加します。 best practives catching error Angualr 2

 .catch((error: any) => {  //catch Errors here using catch block 
      if (error.status === 500) { 
       // Display your message error here 
      } 
      else if (error.status === 400) { 
       // Display your message error here 
      } 
     }); 

Answer 2

を私はこのように私のコードを実装している：

：

login(email: string, password: string): Observable<boolean> { 
    return new Observable(observer => { 
     var data = { email: email, password: password }; 
     this.http.post(this.server_url + '/auth/authenticate', data).subscribe(x => { 
     var result = { 
      email: x.json().email, 
      token: x.json().token, 
      roles: x.json().roles.map(x => x.name) 
     } 
     localStorage.setItem(this._userKey, JSON.stringify(result)); 
     observer.next(true); 
     observer.complete(); 
     }, er => { 
     if (er.status == 401) { 
      observer.next(false); 
      observer.complete(); 
     } else { 
      console.log(er); 
      observer.error(er); 
      observer.complete(); 
     } 
     }); 
    }); 
    } 

ので、それは三つの可能性を扱います

1. クレデンシャルが間違っている場合はtrueを返します。
2. クレデンシャルが間違っている場合はfalseを返します（サーバは！リターン401個のステータス）
3. は、そうでない場合がある問題がサーバーにあり、エラー

を投げると、ハンドラで私が得た：

login() { 
    this.loading = true; 
    this.authenticationService.login(this.model.username, this.model.password) 
     .subscribe(result => { 
     if (result == true) {    
      this.router.navigate(['/home']); 
     } else { 
      this.error = 'Username or password is incorrect'; 
      this.loading = false; 
     } 
     }, err => { 
     this.error = 'Unexpected error occured.. please contact the administrator..'; 
     this.loading = false; 
     }); 
    }