先說範圍

這篇是從一個客戶專案整理出來的。為了保護客戶,我不會提品牌、資料表、欄位、實際的營運流程或用了哪些外部服務,只講換到別的專案也用得上的做法。

如果你在做表單很多、權限又複雜的 React 資料系統,下面這幾點可以參考。

型別不要只放在前端

表單欄位、執行時的驗證跟資料存取如果各自維護,功能一多很容易就對不上了。這個案子我用 TypeScript 加 schema validation 把邊界講清楚,輸入有錯在進資料層之前就會被擋下來。

權限要放在資料那一層

前端把按鈕藏起來只是讓介面好看一點,沒辦法真的擋住不該做的操作。所以資料能不能存取是後端資料層在判斷,前端再照使用者有哪些權限決定要顯示哪些按鈕。兩邊各管各的,責任比較清楚。

狀態複雜就把它寫清楚

一筆資料如果同時有好幾種狀態,只用幾個 true/false 很快就會出現不合理的組合。我把可以接受的狀態轉換寫成明確的規則,這樣畫面、驗證跟報表看同一筆資料的時候,理解才會一致。