此貼文系列已在 NgateSystems.com 建立索引。您還可以在那裡找到超級有用的關鍵字搜尋工具。
最後評論：24 年 11 月
本系列先前介紹如何將 Svelte 框架與 Google 的 Firestore 資料庫用戶端 API 結合使用，快速、愉快地開發有用的資訊系統。然而遺憾的是，Post 3.3 揭示了 Firebase 原本出色的身份驗證系統如何不支援伺服器端 load() 和 actions() 函數中的 Firestore 活動，其中資料庫規則引用 auth 物件。
跳過 Firestore 授權規則不是一種選擇 - 如果沒有這些，您的資料庫將向任何可以從您的 Web 應用劫持 firebaseConfig 金鑰的人開放。這篇文章介紹了重新編寫 Svelte 伺服器端程式碼的方法，以便它在用戶端上運行，同時 Firestore 規則保持不變。
並非所有 load() 函數都會受到 Firestore 規則的影響。那些引用 Firestore public 集合的容器仍將在伺服器端正常運作。客戶端 API 仍然可以在 page.server.js 檔案中使用 - 如果要求使用受驗證保護的集合，它就無法運作。
如果您的 load() 函數處理公用文件，而您只想避免伺服器端偵錯，您可以考慮將 load() 函數移至 page.js 檔案中。這與 page.server.js 檔案完全相同 - Svelte 仍會在載入時自動執行函數。但現在這種情況發生在客戶端，可以在瀏覽器中進行偵錯。有關詳細信息，請參閱加載數據中的 Svelte 文件
但是，「受損」的 load() 函數（通常使用 Firestore 規則來確保使用者只能存取自己的資料）必須重新定位到客戶端程式碼中。通常，這將重新設計為 <script> 中的新的、適當命名的函數。其關聯的 page.svelte 檔案的部分。 </script>
但現在您必須找到一種方法來在頁面初始化時自動啟動重新定位的 load() 函數 - 您不再受益於 Svelte 的原生 load() 函數的內建安排。問題是您重新定位的函數是非同步的，因此無法直接從 page.svelte 檔案的 <script> 啟動。部分。這個問題可以透過使用 Svelte 的 onMount 實用程式來解決。 </script>
“OnMount”是一個 Svelte 生命週期“鉤子”，在啟動 Web 應用程式頁面時自動運行。在 onMount() 內，您現在可以安全地等待重新定位的 load() 函數 - 您可能還記得之前在註銷函數中遇到過它。您可以在 Svelte Lifecycle Hooks 中找到描述。
在這種情況下，沒有選擇。受損的 actions() 函數必須重新定位到 <script> 中。父 page.svelte 檔案的部分。此處的表單提交按鈕必須重新設計，以透過 on:click 安排引用重新定位的函數來「觸發」操作。 </script>
在以下程式碼範例中，新的 products-display-rf 路由顯示舊的「Magical Products」productNumbers 清單。這裡使用的 load() 沒有受到影響，但它的程式碼仍然被移到 page.js 檔案中，讓您確認可以在瀏覽器中偵錯它。唯一的其他變化是：
將此程式碼複製到「-rf」後綴資料夾中的新檔案中。但在執行此操作時請務必小心 - 在 VSCode 狹窄的資料夾層次結構中處理大量令人困惑的頁面檔案需要高度集中註意力。完成後，執行開發伺服器並在 http://localhost:5173/products-display-rf 位址測試新頁面。
「產品顯示」頁面看起來應該與以前完全相同，但是當您點擊時，「產品詳細資料」頁面現在應該顯示動態產生的內容。
產品維護頁面的客戶端版本中的事情更加有趣。
由於您的產品集合的 Firebase 規則現在會引用身份驗證（因此要求潛在用戶「登入」），因此新增產品文件的 actions() 函數會受到損害。因此必須將其從 page.server.js 檔案中移出並重新定位到父 page.svelte 檔案中。
這裡，函數被重新命名為handleSubmit()，並由
以上是NgSysV.A Serious Svelte InfoSys：規則友善的版本的詳細內容。更多資訊請關注PHP中文網其他相關文章！
