Navigation Guards 導航守衛

vue學習筆記

yenchenjulia 2024-02-21 14:50:04 ‧ 522 瀏覽

分享至

前言
本來看了看以為自己懂了，用法也跟Lifecycle hooks差不多，覺得好像沒什麼好說的，打算跳過導航守衛，但今天一早起床，試著在腦海回想解釋給自己聽，支支吾吾的，非常不靠譜，我還是很需要故事來詮釋，用小朋友都能理解的故事來記憶才能讓我印象深刻。也許之後兒子想學，可以派上用場XD
導航守衛
今天來打造一間虛擬銀行吧！礙於時間，沒有實作只有概念講解，小兒子腸胃炎ing，趁他睡覺休息時偷空寫一下(淚)，好的，不說廢話，銀行最重要就是保全系統，我的認知下，保全系統即為今天的主題導航守衛。下面會提到的每個hook都是一個守衛的概念，各司其職，也分派在以下不同的三個工作竿位
- 全域：也就是整間銀行，不管到哪都適用，有三個hooks，可供調用
  - beforeEach:本來我的想像是黏在銀行各個門窗上的保全系統，防止沒有權限的外人從任何地方進入，但越想越矛盾，他的意思是在進入任一路由前必經的程序，所以應該假設自己是銀行員工，當你進到銀行大廳，不管你要去哪個單位（跳轉至每個路由前），都必須有員工證（身份驗證）才能進入，否則就會被請回大廳（回到登入頁面）。
  - beforeResolve:這個hook在路由跳轉前但beforeEach執行完且在所有路由的導航守衛都執行完時觸發，通常用在呼叫api跟拿資料。這個比較抽象，我還沒想好它是什麼？是單位內的同仁先行得知誰誰誰要來，他會需要用到什麼資料，在他還沒進門前，先備好的意思嗎？我不是很確定．．．
  - afterEach:路由跳轉結束後觸發，通常用於追蹤使用者瀏覽紀錄，也就是說如果跳轉沒失敗的話，就會紀錄這個人到了這裡辦了什麼事。
- 路由
  - beforeEnter:做的事跟全域beforeEach一樣，只是直接放在指定的路由裡，我的想像就是銀行裡的大金庫，不是人人都能去，應該只有高層才到得了，去到那就會有beforeEnter等著查驗你的身分，閒雜人等只能乖乖地離開
- 元件
  有時A單位跟B單位因為有重疊的業務，所以會使用同一個小金庫(同一元件)，所以從A單位轉到B單位(路由被更新了)，但對到的是同一個實體元件時，這時就可以出動下面三個hooks共同管理。
  - beforeRouteEnter:路由尚未進入該元件時觸發，比較特別的是他跟上次Lifecycle提及的beforeCreate一樣沒有this，因為元件還沒有被建立，但他可以用next取得實體。做的事也不外乎跟上面那些守衛一樣，身份驗證，數據加載以及路由重新導向。
  - beforeRouteUpdate:路由被改變，但元件本身是同一個的時候被觸發，通常用於數據重新加載，因為使用對象不同，看的文件會有所差異，例如外匯進出兩個單位（我亂講的，沒在銀行待過XD只是讓自己好理解）
  - beforeRouteLeave: 當路由要離開時自動觸發，通常用在詢問使用者是否真的要跳轉到其他路由，就是你要關金庫前，守衛會問你：你確定事情都處理妥當了嗎？
心得
在怕兒子隨時起來的時間壓力下趕完了這篇，但有寫有差，我腦袋裡每個守衛都已經搭上自己該有的長相XD，負責身份驗證的最好是個凶神惡煞人人怕，數據加載的就是一板一眼會計臉，好愛幻想喔我，哈哈！寫到這，我的兒子醒來催我他餓了，希望他等等吃了不要吐，快快好起來呀～
參考資料
號外：工商一下，Udemy大特價，只有今天，有需要的人可以趕快去買喔！我追的工程師作家推薦下面這個，有興趣可參考
- The Complete 2024 Web Development Bootcamp