NgSysV.A Serious Svelte InfoSys：規則友善的版本

此貼文系列已在 NgateSystems.com 建立索引。您還可以在那裡找到超級有用的關鍵字搜尋工具。

最後評論：24 年 11 月

一、簡介

本系列先前介紹如何將 Svelte 框架與 Google 的 Firestore 資料庫用戶端 API 結合使用，快速、愉快地開發有用的資訊系統。然而遺憾的是，Post 3.3 揭示了 Firebase 原本出色的身份驗證系統如何不支援伺服器端 load() 和 actions() 函數中的 Firestore 活動，其中資料庫規則引用 auth 物件。

跳過 Firestore 授權規則不是一種選擇 - 如果沒有這些，您的資料庫將向任何可以從您的 Web 應用劫持 firebaseConfig 金鑰的人開放。這篇文章介紹了重新編寫 Svelte 伺服器端程式碼的方法，以便它在用戶端上運行，同時 Firestore 規則保持不變。

2. 重新設計「受損」的 load() 函數

並非所有 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 中找到描述。

3. 重新設計「受損」的 actions() 函數

在這種情況下，沒有選擇。受損的 actions() 函數必須重新定位到 <script> 中。父 page.svelte 檔案的部分。此處的表單提交按鈕必須重新設計，以透過 on:click 安排引用重新定位的函數來「觸發」操作。 </script>

4. 範例：產品顯示頁面的規則友善版本

在以下程式碼範例中，新的 products-display-rf 路由顯示舊的「Magical Products」productNumbers 清單。這裡使用的 load() 沒有受到影響，但它的程式碼仍然被移到 page.js 檔案中，讓您確認可以在瀏覽器中偵錯它。唯一的其他變化是：

• 程式碼現在包含在按一下「神奇產品」清單中的產品項目時顯示 ProductDetails 欄位的擴充功能。
• firebase-config 現在從上一篇文章介紹的 lib 檔案匯入

將此程式碼複製到「-rf」後綴資料夾中的新檔案中。但在執行此操作時請務必小心 - 在 VSCode 狹窄的資料夾層次結構中處理大量令人困惑的頁面檔案需要高度集中註意力。完成後，執行開發伺服器並在 http://localhost:5173/products-display-rf 位址測試新頁面。

「產品顯示」頁面看起來應該與以前完全相同，但是當您點擊時，「產品詳細資料」頁面現在應該顯示動態產生的內容。

5. 範例：產品維護頁面的規則友善版本

產品維護頁面的客戶端版本中的事情更加有趣。

由於您的產品集合的 Firebase 規則現在會引用身份驗證（因此要求潛在用戶「登入」），因此新增產品文件的 actions() 函數會受到損害。因此必須將其從 page.server.js 檔案中移出並重新定位到父 page.svelte 檔案中。

這裡，函數被重新命名為handleSubmit()，並由

上的on:submit={handleSubmit}子句「觸發」。收集產品數據。

雖然 products-maintenance 頁面沒有 load() 函數，但 onMount 仍然存在於更新的pagesvelte 檔案中。這是因為 onMount 提供了一種有用的方法，可以有效地重新導向在登入之前嘗試執行維護頁面的使用者。

看看您是否可以在新的 products-maintenance-rf/ page.svelte 檔案和更新的 /login/ page.svelte 檔案中遵循下面列出的邏輯。

檢查 chatGPT 以了解 auth 還提供哪些內容。例如，您可以使用使用者的 uid 來僅顯示該使用者「擁有」的文件。

六、總結

如果您的目標很簡單，那麼這裡描述的「規則友善」方法儘管有其所有缺陷，但可能完全足以滿足您的需求。用戶端 Svelte 提供了一個快速、輕鬆開發個人應用程式的絕佳場所。但要注意你失去了什麼：

• 高效的資料載入 - 資料顯示在螢幕上之前可能會有延遲。
• 安全輸入驗證
• 有保證的搜尋引擎最佳化

所以，如果您的目標是成為認真的軟體開發人員，請繼續閱讀。但請注意，事情會變得更加「有趣」！

以上是NgSysV.A Serious Svelte InfoSys：規則友善的版本的詳細內容。更多資訊請關注PHP中文網其他相關文章！