[指南] Vue 動態路由後續加載的兩種處理方式

章節連結

若 Vue 使用動態路由搭配權限一同使用,會需要經歷「取得路由清單」->「根據權限過濾頁面」->「將過濾出的路由加到既有路由中」->「重新觸發路由檢查」四個主要環節。這邊筆記下後續加載路由的兩種處理方式。
vue.js logo vue


內容

取得路由清單

這點有兩種作法如下:
1. 路由內容皆由前端做控制,所有的頁面資訊都在前端程式碼中
此方案僅需要後端回傳使用者對應的角色列表,剩餘的交給前端去過濾路由取得結果。
優點:頁面與資料庫分離,耦合度低
缺點:每當頁面有需要進行更動 (如更名、隱藏、權限調整…等),會需要重新上版佈署
2. 後端需要回吐前端路由所需的巢狀架構。前端接收到後,將巢狀架構轉成 vue-router 可讀取的內容並判斷權限
優點:可由後端 DB 控制有哪些頁面,其頁面屬性也可以直接從 DB 調整
缺點:前端若對應頁面的檔名若有進行修改,需和後端進行溝通連動 DB 調整

根據權限過濾頁面

若是採用方法一,因路由設定都已在前端準備完畢,僅需要根據角色進行過濾即可
若是採用方法二,會需要先轉換由後端傳回來的巢狀結構 (因為 DB 僅能存字串,你需要轉成 component 的 function ),再進行過濾

將過濾出的路由加到既有路由中 & 重新觸發路由檢查

利用 vue-router 提供的 router.addRoutes() 方法,並搭配  next({ …to, replace:true }) 確保加載完成且不會留下歷史記錄

按讚加入粉絲團

延伸閱讀