NgSysV.A Serious Svelte InfoSys: Eine regelfreundliche Version

Diese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine äußerst nützliche Stichwortsuchfunktion.

Letzte Bewertung: 24. November

1. Einführung

In dieser Serie wurde zuvor beschrieben, wie Sie das Svelte-Framework in Verbindung mit der Firestore-Datenbank-Client-API von Google verwenden können, um schnell und unterhaltsam nützliche Informationssysteme zu entwickeln. Leider hat Beitrag 3.3 jedoch gezeigt, dass das ansonsten hervorragende Authentifizierungssystem von Firebase keine Firestore-Aktivitäten in serverseitigen Load()- und Actions()-Funktionen unterstützt, bei denen Datenbankregeln auf das Authentifizierungsobjekt verweisen.

Das Überspringen Ihrer Firestore-Autorisierungsregeln ist keine Option – ohne diese ist Ihre Datenbank für jeden offen, der die FirebaseConfig-Schlüssel aus Ihrer Webanwendung kapern kann. In diesem Beitrag werden Möglichkeiten beschrieben, den serverseitigen Svelte-Code so zu überarbeiten, dass er auf der Clientseite ausgeführt wird, während die Firestore-Regeln fest in Kraft bleiben.

2. Überarbeitung „kompromittierter“ Load()-Funktionen

Nicht alle Load()-Funktionen sind vom Vorhandensein von Firestore-Regeln betroffen. Diejenigen, die auf Firestore-öffentliche-Sammlungen verweisen, werden weiterhin problemlos serverseitig ausgeführt. Die Client-API ist weiterhin in den page.server.js-Dateien verfügbar – sie funktioniert jedoch nicht, wenn sie aufgefordert wird, durch Authentifizierung geschützte Sammlungen zu verwenden.

Wenn Ihre Load()-Funktion öffentliche Dateien adressiert und Sie einfach serverseitiges Debuggen vermeiden möchten, können Sie Ihre Load()-Funktion in eine page.js-Datei verschieben. Dies funktioniert genau wie eine page.server.js-Datei – Svelte führt die Funktion weiterhin automatisch beim Laden aus. Dies geschieht jedoch jetzt clientseitig, wo es im Browser debuggt werden kann. Weitere Informationen finden Sie in der Svelte-Dokumentation unter „Laden von Daten“

Allerdings muss eine „kompromittierte“ Load()-Funktion (in der Regel dort, wo Firestore-Regeln verwendet werden, um sicherzustellen, dass Benutzer nur auf ihre eigenen Daten zugreifen können) in clientseitigen Code verlagert werden. Typischerweise wird dies in eine neue, entsprechend benannte Funktion im <script> umgearbeitet. Abschnitt der zugehörigen page.svelte-Datei.</script>

Aber jetzt müssen Sie einen Weg finden, Ihre verschobene Load()-Funktion automatisch bei der Seiteninitialisierung zu starten – Sie profitieren nicht mehr von den integrierten Vorkehrungen von Svelte für native Load()-Funktionen. Das Problem besteht darin, dass Ihre verschobene Funktion asynchron ist und daher nicht direkt über das <script> einer page.svelte-Datei gestartet werden kann. Abschnitt. Dieses Problem wird durch die Verwendung des onMount-Dienstprogramms von Svelte gelöst.</script>

„OnMount“ ist ein Svelte-Lebenszyklus-„Hook“, der automatisch ausgeführt wird, wenn eine Webanwendungsseite gestartet wird. Innerhalb eines onMount() können Sie jetzt sicher auf Ihre verschobene Funktion „load()“ warten – Sie erinnern sich vielleicht, dass Sie sie früher in der Funktion „logout“ getroffen haben. Eine Beschreibung finden Sie bei Svelte Lifecycle Hooks.

3. Überarbeitung „kompromittierter“ Actions()-Funktionen

In diesem Fall gibt es keine Optionen. Kompromittierte Actions()-Funktionen müssen in das<script> verschoben werden. Abschnitt der übergeordneten Datei page.svelte. Hier müssen die Schaltflächen zum Senden von Formularen überarbeitet werden, um die Aktion über on:click-Anordnungen auszulösen, die auf die verschobene Funktion verweisen.</script>

4. Beispiel: Regelfreundliche Versionen der Produktanzeigeseite

In den folgenden Codebeispielen zeigt eine neue Route „products-display-rf“ die alte Liste „Magical Products“ mit Produktnummern an. Das hier verwendete Load() ist nicht beeinträchtigt, aber sein Code wird dennoch in eine page.js-Datei verschoben, damit Sie bestätigen können, dass Sie es im Browser debuggen können. Die einzigen weiteren Änderungen sind:

• Der Code enthält jetzt die Erweiterungen, um das Feld „productDetails“ anzuzeigen, wenn auf einen Produkteintrag in der Liste „Magische Produkte“ geklickt wird.
• firebase-config wird jetzt aus der im letzten Beitrag vorgestellten lib-Datei importiert

// 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
  };
}

Kopieren Sie diesen Code in neue Dateien in Ordnern mit dem Suffix „-rf“. Aber seien Sie dabei vorsichtig – die Arbeit mit vielen verwirrenden Auslagerungsdateien in den engen Ordnerhierarchien von VSCode erfordert höchste Konzentration. Wenn Sie fertig sind, führen Sie Ihren Entwicklungsserver aus und testen Sie die neue Seite unter der Adresse http://localhost:5173/products-display-rf.

Die Seite „Produktanzeige“ sollte genauso aussehen wie zuvor, aber wenn Sie durchklicken, sollte die Seite „Produktdetails“ jetzt dynamisch generierte Inhalte anzeigen.

5. Beispiel: Regelfreundliche Version der Produktwartungsseite

Eher interessanter sieht es in einer clientseitigen Version der Produktwartungsseite aus.

Da Ihre Firebase-Regel für die Produktsammlung jetzt auf die Authentifizierung verweist (und daher erfordert, dass potenzielle Benutzer „angemeldet“ sind), ist die Funktion actions(), die ein neues Produktdokument hinzufügt, gefährdet. Daher muss dies aus der Datei „page.server.js“ verschoben und in die übergeordnete Datei „page.svelte“ verschoben werden.

Hier wird die Funktion in handleSubmit() umbenannt und durch eine on:submit={handleSubmit}-Klausel auf der

-Klausel „ausgelöst“. das die Produktdaten sammelt.

Obwohl die Produktwartungsseite keine Load()-Funktion hat, ist onMount dennoch in der aktualisierten Pagesvelte-Datei enthalten. Dies liegt daran, dass onMount eine nützliche Möglichkeit bietet, Benutzer sinnvoll umzuleiten, die versuchen, die Wartungsseite auszuführen, bevor sie sich angemeldet haben.

Prüfen Sie, ob Sie der unten aufgeführten Logik in einer neuen Datei „products-maintenance-rf/ page.svelte“ und einer aktualisierten Datei „/login/ page.svelte“ folgen können.

// 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;

Erkundigen Sie sich bei chatGPT, was sonst noch von auth verfügbar ist. Beispielsweise könnten Sie die UID des Benutzers verwenden, um nur Dokumente anzuzeigen, die diesem Benutzer gehören.

6. Zusammenfassung

Wenn Sie einfache Ziele haben, kann der hier beschriebene „regelfreundliche“ Ansatz trotz aller Mängel für Ihre Bedürfnisse völlig ausreichend sein. Clientseitig bietet Svelte eine wunderbare Spielwiese für die schnelle und schmerzlose Entwicklung persönlicher Anwendungen. Aber seien Sie sich bewusst, was Sie verloren haben:

• Effizientes Laden der Daten – es kann zu einer Verzögerung kommen, bevor die Daten auf dem Bildschirm angezeigt werden.
• sichere Eingabevalidierung
• sicheres SEO

Wenn Sie also eine Karriere als seriöser Softwareentwickler anstreben, lesen Sie bitte weiter. Aber seien Sie gewarnt, es wird noch viel „interessanter“!