【Ionic 4】防止任意存取頁面—Angular路徑保護機制Route Guards

Firebase提供email登入與註冊功能，前文(【Ionic 4】新頁面瀏覽機制：Angular Router)就註冊做介紹，一旦註冊成功，後續便可直接登入，進入個人頁面，例如dashboard等。然而，在Angular Router機制下，Ionic apps各個頁面皆有直接存取路徑，如'/login', '/dashboard'；只要輸入路徑便可前往該頁面。因此，必須有保護路徑的情境設定，例如'/dashboard'要在登入之後才允許進入。Angular Router提供了route guards，如CanActivate等界面(interface)，透過實做(implement)這些界面，便可達到保護路徑的目的。底下以Firebase登入/註冊，以及個人dashboard三個頁面為例，說明Route Guards的使用方式。

本文使用套件@angular 6.1.1，@angular/fire 5.0.2與firebase 5.5.4。@ionic-angular版本則為4.0.0-beta.12。完整專案詳見GitHub專案。

【Ionic 4】會員Email註冊－以Firebase為雲端平台（含FormBuilder表單與輸入驗證）

Firebase支援「Email/密碼登入與註冊」以及多種OAuth登入方式，如Google，Twitter，Facebook等，本文說明如何使用Firebase「Email/密碼」認證API，設計會員Email註冊功能。除此之外，註冊表單則以Reactive Forms(FormBuilder)設計，並帶有輸入驗證功能，如下圖所示。

有驗證功能的註冊表單。註冊與登出都是使用Firebase認證API

此App有註冊、HomePage兩個頁面。首頁設定為註冊頁面，註冊後，會在Cloud Firestore新增會員資料，並轉往HomePage；在HomePage按下登出又會回註冊頁面。完整程式碼在Github。製作重要步驟如下：

【Firebase】使用cloud functions建立「自動遞增」資料欄位

Firebase是專為行動應用打造的雲端平台，雖有其收費機制，但仍有提供部份免費流量。加上Angular 6也已將Firebase資料庫存取的程式碼納入專案中(@angular/fire，原為angularfire2套件)，故以ionic-angular為主體的Ionic 4 App，拿Firebase做為雲端資料庫平台，在開發上可說十分方便。

然而，Firebase新版資料庫Cloud Firestore屬於NoSQL文件資料庫(No SQL document database)，運作方式與傳統關聯式資料庫有所不同。其中最大的差異之一是Firestore沒有「自動遞增」，而是以亂數編碼產生unique id。

因此，一旦需要類似員工編號這類不能重複的流水號，在firestore資料庫裡便要自行建立「自動遞增」(auto increment) 機制。本文將介紹以cloud functions實做database trigger，在新增一筆文件時，便會觸發cloud function，在文件加入編號欄位，同時更新流水號。

前置動作

需先至Firebase控制台新增專案，並啟用Cloud Firestore資料庫。進入Firestore資料庫建立counters集合，在其下新增文件users，內有count欄位；該欄位用來儲存自動遞增流水號。另外，也建立users集合，如下圖所示：

在Firestore建立couters/users文件，內有count欄位，用以儲存自動遞增流水號

【Ionic 4】新頁面瀏覽機制：Angular Router

新版Ionic 4在頁面瀏覽(navigation)機制方面加入了Angular Router，連帶頁面權限方面也可使用Router的CanActivate等機制進行控管；Ionic舊版的push/pop方式雖仍可使用，但預期未來應不會再支援。

(本文範例完整程式碼與執行結果可參考stackblitz.com上的專案程式碼與執行結果。)

新建使用Angular Router的Ionic 4專案

為了讓新建專案使用Angular Router，Ionic CLI 4版加入新選項--type=angular。新建專案時加入此選項，便會建立Angular Routing模組檔，內有瀏覽頁面相關設定，例如新建專案：

ionic start RoutingExample blank --type=angular

則會建立模組檔： src/app/app-routing.module.ts，內有預設頁面瀏覽路徑設定：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];

【Ionic 3】頁面瀏覽：參數傳遞

延續Ionic 3頁面瀏覽之push/pop機制，在頁面切換時，另一個重要問題是頁面之間的「參數傳遞」。以常見的「清單列表」/「細節」頁面切換為例，除了呼叫push()外，還必須傳送如「項目編號」的參數到下一個頁面，如下圖所示：

圖1 點選清單項目，必須傳遞參數到「細節」頁面，如"id:2330"。

參數傳遞的工作，在傳送端—亦即上圖的「清單列表」頁面—可將參數以物件的形式，直接加在push()的第二個引數：

    this.navCtrl.push(DetailPage, {
      id: 2330,
      arg: some_value
    });

【Ionic 3】頁面瀏覽機制(Navigation in Ionic 3)

Ionic雖以Angular做為流程運作的基礎，然而，在頁面瀏覽 (navigation) 機制方面，卻非直接採用Angular Router模組的運作方式，而是使用「堆疊」(navigation stack)的概念。

如圖，堆疊最上方的頁面元件是目前可視頁面。當要瀏覽其他頁面元件時，則使用push()，將該元件堆到堆疊上方即可（例如上圖的push(Page3)）。相反的，回到前一頁，則使用pop()（如圖左，pop()後，回到Page2）。

【Ionic 3】建立第一個Tabs版型App

Ionic 3 App開發的入門介紹，內容包括：

  1. 安裝Ionic 3 / Cordova
  2. 建立第一個App: Tabs版型
  3. 預覽執行: ionic serve
  4. App佈署
  5. 除錯(Debugging)

安裝Ionic 3 / Cordova
以Windows環境為例

1. 先行安裝node.js，以便能以npm安裝ionic與cordova。安裝過程需注意 (1) node.js執行檔是否有加入Path環境（安裝時預設值便會加入），(2) 是否能從命令列（cmd.exe）執行node.js指令（也是預設選項）。
2. 開啟cmd，安裝cordova與ionic：

npm install -g ionic cordova

最新版本(2018/1)是cordova 8.0.0, ionic 3.19.1。