若 Vue 使用動態路由搭配權限一同使用，會需要經歷「取得路由清單」->「根據權限過濾頁面」->「將過濾出的路由加到既有路由中」->「重新觸發路由檢查」四個主要環節。這邊筆記下後續加載路由的兩種處理方式。
內容
取得路由清單
這點有兩種作法如下：
1. 路由內容皆由前端做控制，所有的頁面資訊都在前端程式碼中
此方案僅需要後端回傳使用者對應的角色列表，剩餘的交給前端去過濾路由取得結果。
優點：頁面與資料庫分離，耦合度低
缺點：每當頁面有需要進行更動 (如更名、隱藏、權限調整…等)，會需要重新上版佈署
2. 後端需要回吐前端路由所需的巢狀架構。前端接收到後，將巢狀架構轉成 vue-router 可讀取的內容並判斷權限
優點：可由後端 DB 控制有哪些頁面，其頁面屬性也可以直接從 DB 調整
缺點：前端若對應頁面的檔名若有進行修改，需和後端進行溝通連動 DB 調整
根據權限過濾頁面
若是採用方法一，因路由設定都已在前端準備完畢，僅需要根據角色進行過濾即可
若是採用方法二，會需要先轉換由後端傳回來的巢狀結構 (因為 DB 僅能存字串，你需要轉成 component 的 function )，再進行過濾
將過濾出的路由加到既有路由中 & 重新觸發路由檢查
利用 vue-router 提供的 router.addRoutes() 方法，並搭配 next({ …to, replace:true }) 確保加載完成且不會留下歷史記錄
按讚加入粉絲團
