摘要：后臺(tái)注冊(cè)成功后，會(huì)返回狀態(tài)的認(rèn)證信息。后臺(tái)數(shù)據(jù)的處理，詳見(jiàn)利用和構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站三訪(fǎng)問(wèn)。在這個(gè)方法中分別針對(duì)這兩種錯(cuò)誤進(jìn)行處理。

上一節(jié)簡(jiǎn)單介紹了一下利用angular構(gòu)建的主路由模塊，根據(jù)上一節(jié)的介紹，主頁(yè)面加載時(shí)直接跳轉(zhuǎn)到用戶(hù)管理界面，下面就來(lái)介紹一下用戶(hù)管理模塊。啟動(dòng)應(yīng)用后，初始界面應(yīng)該是這樣的：

用戶(hù)管理模塊（users）包括主模塊UsersModule和HomeComponent、LoginComponent、RegistComponent、UsersComponent幾個(gè)組件和路由模塊UsersRoutingModule還有一個(gè)服務(wù)類(lèi)UserService，因?yàn)檫@個(gè)服務(wù)還要在其他模塊中使用，先把它放在AppModule的providers中，現(xiàn)在AppModule的providers應(yīng)該為這樣：

providers: [
    JumbotronServive,
    UserService,
  ],

UserService類(lèi)主要負(fù)責(zé)向服務(wù)器傳遞用戶(hù)的注冊(cè)和登錄信息，代碼如下：

import { Injectable } from "@angular/core";
import { User } from "./user";
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
@Injectable()
export class UserService {
    constructor(
        private http: HttpClient) { }
    //注冊(cè)用戶(hù)
    saveUser(user: User) {
        const savedUser = {
            name: user.name,
            password: user.password,
            email: user.email
        }
        return this.http.post("http://localhost:3000/users/register", savedUser, {
            responseType: "json"
        });

    }
    //登錄
    getUser(user: User) {
        const loginUser = {
            name: user.name,
            password: user.password
        };
        return this.http.post("http://localhost:3000/users/login", loginUser, {
            observe: "response" 
        });

    }
    
    //錯(cuò)誤處理
    handleError(err: HttpErrorResponse): string {
        if (err.error instanceof Error) {
            return "發(fā)生錯(cuò)誤，錯(cuò)誤信息:" + err.error.message;
        } else {
            console.log(`Backend returned code ${err.status}, body was: ${err.error["msg"]}`);
            return err.error["msg"];
        }
    }
}

這里面要用到User類(lèi)，User類(lèi)的代碼：

export class User{
    constructor(
        public id:number,
        public name:string,
        public password:string,
        public email:string
    ){}
}

在UserService中最主要的是HttpClient，它是angular4以后新功能，Angular 為應(yīng)用程序提供了一個(gè)簡(jiǎn)化的 API 來(lái)實(shí)現(xiàn) HTTP 功能。它基于瀏覽器提供的XMLHttpRequest接口。 HttpClient帶來(lái)的其它優(yōu)點(diǎn)包括：可測(cè)試性、強(qiáng)類(lèi)型的請(qǐng)求和響應(yīng)對(duì)象、發(fā)起請(qǐng)求與接收響應(yīng)時(shí)的攔截器支持，以及更好的、基于可觀察（Observable）對(duì)象的錯(cuò)誤處理機(jī)制。要使用HttpClient，先要引入HttpClientModule，將HttpClientModule引入到AppModule的NgModule的imports屬性的數(shù)組中。
saveUser()方法負(fù)責(zé)將用戶(hù)的注冊(cè)信息post給后臺(tái)服務(wù)器，它接收一個(gè)User類(lèi)的對(duì)象為參數(shù)，通過(guò)HttpClient類(lèi)型的對(duì)象http的post方法將包含用戶(hù)名、密碼和用戶(hù)郵箱(可以為空值)的saveUser對(duì)象傳遞到服務(wù)器。后臺(tái)注冊(cè)成功后，會(huì)返回狀態(tài)200的認(rèn)證信息。(后臺(tái)數(shù)據(jù)的處理，詳見(jiàn)利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站（三）—express訪(fǎng)問(wèn)mysql)。
getUser()方法也接收一個(gè)User類(lèi)的對(duì)象為參數(shù)，將登陸的用戶(hù)名和密碼post到后臺(tái)服務(wù)器，如果用戶(hù)名和密碼匹配同樣返回返回狀態(tài)200的認(rèn)證信息。
saveUser和getUser方法返回的都是一個(gè) Observable>對(duì)象，當(dāng)我們調(diào)用這兩個(gè)方法后，需要使用Observable的subscribe方法進(jìn)行訂閱，才能真正發(fā)起一次請(qǐng)求并獲得后端返回的數(shù)據(jù)。
handleError()方法負(fù)責(zé)錯(cuò)誤處理，它接收一個(gè)HttpErrorResponse類(lèi)型的參數(shù)。對(duì)于HttpClient的錯(cuò)誤一般有兩種，如果后端返回了一個(gè)失敗的返回碼（如404、500等），它會(huì)返回一個(gè)錯(cuò)誤。如果在客戶(hù)端這邊出了錯(cuò)誤（比如在RxJS操作符中拋出的異?；蚰承┳璧K完成這個(gè)請(qǐng)求的網(wǎng)絡(luò)錯(cuò)誤），就會(huì)拋出一個(gè)Error類(lèi)型的異常。在這個(gè)方法中分別針對(duì)這兩種錯(cuò)誤進(jìn)行處理。