【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欄位，用以儲存自動遞增流水號