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 文件导入

// src/routes/products-display-rf/+page.svelte
<script>
    export let data;
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/products-display-rf/+layout.svelte
<header>
    <h2>





<pre class="brush:php;toolbar:false">// routes/products-display-rf/+page.js
import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { db } from "$lib/utilities/firebase-client"

export async function load() {

  const productsCollRef = collection(db, "products");
  const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
  const productsSnapshot = await getDocs(productsQuery);

  let currentProducts = [];

  productsSnapshot.forEach((product) => {
    currentProducts.push({ productNumber: product.data().productNumber });
  });

  return { products: currentProducts }
}

// src/routes/products-display-rf/[productNumber]/+page.svelte
<script>
  import { goto } from "$app/navigation";
  export let data;
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/products-display-rf/[productNumber]/+page.js
import { collection, query, getDocs, where } from "firebase/firestore";
import { db } from "$lib/utilities/firebase-client";

export async function load(event) {
  const productNumber = parseInt(event.params.productNumber, 10);

  // Now that we have the product number, we can fetch the product details from the database

  const productsCollRef = collection(db, "products");
  const productsQuery = query(productsCollRef, where("productNumber", "==", productNumber));
  const productsSnapshot = await getDocs(productsQuery);
  const productDetails = productsSnapshot.docs[0].data().productDetails;

  return {
    productNumber: productNumber, productDetails: productDetails
  };
}

将此代码复制到“-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 文件中遵循下面列出的逻辑。

// src/routes/products-maintenance-rf/+page.svelte
<script>
    import { onMount } from "svelte";
    import { collection, doc, setDoc } from "firebase/firestore";
    import { db } from "$lib/utilities/firebase-client";
    import { goto } from "$app/navigation";
    import { auth } from "$lib/utilities/firebase-client";
    import { productNumberIsNumeric } from "$lib/utilities/productNumberIsNumeric";

    let productNumber = '';
    let productDetails = '';
    let formSubmitted = false;
    let databaseUpdateSuccess = null;
    let databaseError = null;

    let productNumberClass = "productNumber";
    let submitButtonClass = "submitButton";

    onMount(() => {
        if (!auth.currentUser) {
            goto("/login?redirect=/products-maintenance-rf");
            return;
        }
    });

    async function handleSubmit(event) {
        event.preventDefault(); // Prevent default form submission behavior
        formSubmitted = false; // Reset formSubmitted at the beginning of each submission

        // Convert productNumber to an integer
        const newProductNumber = parseInt(productNumber, 10);
        const productsDocData = {
            productNumber: newProductNumber,
            productDetails: productDetails,
        };

        try {
            const productsCollRef = collection(db, "products");
            const productsDocRef = doc(productsCollRef);
            await setDoc(productsDocRef, productsDocData);

            databaseUpdateSuccess = true;
            formSubmitted = true; // Set formSubmitted only after successful operation

            // Clear form fields after successful submission
            productNumber = '';
            productDetails = '';
        } catch (error) {
            databaseUpdateSuccess = false;
            databaseError = error.message;
            formSubmitted = true; // Ensure formSubmitted is set after error
        }
    }
</script>

Product Number

// src/routes/login/+page.svelte
<script>
    import { onMount } from "svelte";
    import { goto } from "$app/navigation"; // SvelteKit's navigation for redirection
    import { auth } from "$lib/utilities/firebase-client";
    import { signInWithEmailAndPassword } from "firebase/auth";

    let redirect;
    let email = "";
    let password = "";

    onMount(() => {
        // Parse the redirectTo parameter from the current URL
        const urlParams = new URLSearchParams(window.location.search);
        redirect = urlParams.get("redirect") || "/";
    });

    async function loginWithMail() {
        try {
            const result = await signInWithEmailAndPassword(
                auth,
                email,
                password,
            );
            goto(redirect);
        } catch (error) {
            window.alert("login with Mail failed" + error);
        }
    }
</script>

<div>



<p>Test this by starting your dev server and launching the /products-maintenance-rf page. Because you're not logged you'll be redirected immediately to the login page. Note that the URL displayed here includes the products-maintenance-rf return address as a parameter. </p>

<p>Once you're logged in, the login page should send you back to products-maintenance-rf. Since you're now logged in, the new version of the product input form (which now includes a product detail field) will be displayed.</p>

<p>The input form works very much as before, but note how it is cleared after a successful submission, enabling you to enter further products. Use your products-display-rf page to confirm that new products and associated product details data are being added correctly.</p>

<p>Note also, that when a user is logged in, you can use the auth object thus created to obtain user details such as email address:<br>
</p>

<pre class="brush:php;toolbar:false">const userEmail = auth.currentUser.email;

检查 chatGPT 以了解 auth 还提供哪些内容。例如，您可以使用用户的 uid 来仅显示该用户“拥有”的文档。

六、总结

如果您的目标很简单，那么这里描述的“规则友好”方法尽管有其所有缺陷，但可能完全足以满足您的需求。客户端 Svelte 提供了一个快速、轻松地开发个人应用程序的绝佳场所。但要注意你失去了什么：

• 高效的数据加载 - 数据显示在屏幕上之前可能会有延迟。
• 安全输入验证
• 有保证的搜索引擎优化

所以，如果您的目标是成为一名认真的软件开发人员，请继续阅读。但请注意，事情会变得更加“有趣”！