2020-6-2 Angular 第11章 路由

[hsiaofung]

• 如何以深度連結特定網頁與元件
• 如何設定導向與保護特定導向?

[hsiaofung]

• 前面:
  • 如何擴充應用程式?
  • 製作可重複使用的服務
  • 如何以HttpClient整合與處理HTTP呼叫
  • 以可觀察與RxJS處理非同步流程。

[hsiaofung]

本章:

• 在不同的路徑下封裝各種網頁，並在需要時深度連結。
• 實作Angular內建的導向模組
• 如何以AuthGuards與其它路由功能保護應用程式。

[hsiaofung]

• 第一 : 設定Angular 導向 :
  • 如何擴充應用程式 :
    • 新增元件、新增模組、新增服務。
    • 新增導向。
      • 新增4個路徑 :
        • 股票清單
        • 建構股票
        • 註冊
        • 登入
          • 保護股票清單，登入後才能存取。
          • 加入保護以確保離開表單不會讓資料跑掉。

[hsiaofung]

• 設定Angular 的導向:
  • 設定index.html中中的，若應用程式放在根， <base href="/">
  • 匯入與設定RouteModule
    • 為路徑定義獨立的模組，能懶載入與路徑而非事先全載入。

[hsiaofung]

• 單頁應用程式導向 : (若無如此，點擊連結整個網頁會重新載入)
  • 當路徑改變時，僅載入元件並執行相對應的XHR呼叫
  • 以routerLink取代href。這確保所有瀏覽都發生在Angular中。
  • routerLinkActive : 若瀏覽器目前連結與routerLink指令相符時，將傳參數active作為CSS類別。(選取連結加入類別)
  • 點擊任何連結只有相對應的元件會被載入。

[hsiaofung]

• 萬用字元與預設 :
  • 若瀏覽至不存在URL，會在開發者控制台中產生錯誤。並自動重新導頁。
  • 加入預設路徑以重新導向Login頁。(相較於用元件，可重導到已定義的路徑)
  • pathMatch: full

[hsiaofung]

• 常見導向需求 :
  • 必要路徑參數 :
    • stock/:code : 此URL包括一個變數，它可以根據要載入的股票修改。 元件可於載入時讀取路徑的code，然後從伺服器載入相對應的股票。
    • ActivatedRoute : 是保存目前作用中路徑的資訊的服務，它知道如何解析並讀取資訊。
    • 然後我們使用ActivatedRoute從URL讀取股票代號(code)。
    • snapshot.paramMap是所有URL參數的圖。

---

心得 : 感覺上，Angular 對每一種case都有相對應的物件可以使用，但短時間你可能不知道那麼多。所以你要完成工作還是要使用JavaScript。當然，日後有時間，可用Angular 的物件代替。

[hsiaofung]

• 403 : 因為使用者目前沒有登入。403回應通常是拒絕存取特定資源，通常是因為使用者沒有登入或不能存取此資料。

[hsiaofung]

• 瀏覽應用程式:
  • 註冊成功時瀏覽登入頁
  • 登入成功時瀏覽股票清單頁
  • 點擊股票清單中的股票時瀏覽股票細節。

[hsiaofung]

步驟1:

• 將Angular 的Router的實例注入建構元，發出成功註冊呼叫時，使用router.navigate呼叫導向登入頁。
• navigate方法: 取用陣列，會解析成特定路徑。

[hsiaofung]

• 沒有在應用程式加上本機儲存功能。重新載入網頁需要再登入。
• 重新啟動伺服器需要再註冊，因為Node 伺服器也用記憶體儲存。
• 若直接透過URL開啟股票清單或股票細節頁，應該會看到空頁，因為認證憑證被重置且必須再登入。

[hsiaofung]

• 選擇性路徑參數
  • 在Angular 中讀取路徑定義參數與查詢參數的方法?
  • 例如: 想要傳遞頁數給StockListComponent使它顯示正確的頁。

[hsiaofung]

• 非snapshot 的方式(用可觀察)
  • 若元件只載入一次，且我們從它瀏覽其它元件或路徑是還好。但若同一個元件可能會以不同參數重新載入，則建議不要依靠snapshot。
  • 用可觀察
  • 這在元件載入各種參數而不重新載入元件時很有用。

[hsiaofung]

• 路徑保護 : 是根據你的條件保護載入或卸下路徑的方法。
  • 防止路徑開啟
  • 防止路徑關閉
  • 開啟路徑前載入必要資料

[hsiaofung]

第一個問題:

• 沒有登入並嘗試瀏覽Stock List 元件會看到空頁。我們想要在這種情況下顯示錯誤訊息。並重新導向登入頁以提是使用者要登入。

[hsiaofung]

• UserStoreService : 指出使用者是否有登入?(自定義的服務)
  • 以此服務建構認證保護，認證保護會判斷是否可以繼續，或需要重新導向不同路徑。

[hsiaofung]

AuthGuard 類別 :

• 外觀與行為都像是Angular 服務
• 實作canActivate方法，CanActivate回傳boolean， 若為true，則路徑會啟用，否則路徑不會開啟

[hsiaofung]

• 作路徑保護 :
  • 第一 : 建構AuthCuard 。
  • 第二 : 連結AuthCuard與路由。
  • 第三 : 在路由中加入canActivate 屬性，值是 [AuthGuard]
  • 第四 : 匯入AuthGuard 到app.module，加入providers陣列。

[hsiaofung]

• 防止卸下(停用路由，跳離頁面時先確認。)
  • canDeactivate是防止使用者瀏覽其它頁時流失資料，或自動在使用者瀏覽其它頁時儲存資料。
  • 可以在使用者離開時進行提示。你可以在提示前檢視表單狀態。
  • 結果 : 登入並瀏覽建構股票頁，然後點擊任何連結。此時，你應該會看到是否真的要離開的確認。

[hsiaofung]

• 使用Resolver 預先載入資料
  • 在啟用一個路徑前預先載入資料。
  • 我們想要在元件載入前發出伺服器呼叫。取得資料
  • 我們想要開啟元件前檢查資料是否存在。
  • 在元件之前取得資料。

[hsiaofung]

• 在開啟股票細節前取得股票資料。這也可以讓我們在開啟股票細節元件前檢查特定股票代號是否存在?

[hsiaofung]

總結 :

• 如何設定Angular 路由
• 如何處理不同類型的路徑。(空，和萬用字元)
• 如何處理必要及選擇性參數?
• 路徑保護，確保不會因導向而失去填入表單的資料?
• 預先載入。

[hsiaofung]

用這章技術可實作的功能 :

• 連接路徑 : 登入、產品清單、建構產品、產品細節。
• 建構產品的路徑要登入保護
• 產品清單、產品細節與改變數量只能在登入後存取。
• 記住使用者登入，重新載入網頁也一樣。