1. 在更多頁面新增登入按鈕，並設定樣式

2.設定全域性樣式，將背景改為灰色

  在theme中新增檔案light.scss，設定全域性樣式，並在variables.scss中引入light.scss檔案

3.全域性獲取 http 請求的方法

新建provider元件rest：

ionic g provider rest

在rest.ts中新建方法：

import { HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {

  constructor(public http: HttpClient) {
    //console.log('Hello RestProvider Provider');
  }
/**
 *全域性獲取 http 請求的方法
 *
 * @private
 * @param {string} url
 * @returns {Observable<string[]>}
 * @memberof RestProvider
 */
private getUrlReturn(url:string):Observable<string[]>{
    return this.http.get(url)
          .map(this.extractDate)
          .catch(this.handleError);
  }
  private extractDate(res:Response){
    let body = res.json();
    return JSON.parse(body) || {};
  }
  private handleError(error:Response | any){
    let errMsg:string;
    if(error instanceof Response){
      const body =error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status}-${error.statusText || ''} ${err}`;
    }else{
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

  
}
 

4.點選登入，彈出登入框

 新建page: login頁面 並在app.moudle.ts中引入

 構造彈窗函式：匯入ModalController

5.頁面佈局

login.html程式碼如下：

顯示如下：

6.取消按鈕的實現

在html頁面中新增點選事件

在ts檔案中實現這個函式

7.登入按鈕的實現

將取到的值傳到ts頁面

實現登入等待：

定義共有檔案baseui.ts

參考資料：https://ionicframework.com/docs/components/#loading

引用類：

 8 安裝storge儲存登入的資訊

9 實現登入後頁面跳轉

顯示：

備註：重新整理一下會顯示已登入