【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】新頁面瀏覽機制：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' },
];