Vanilla JavaScript-Anmeldestatusmonitor

Einführung

Im Bereich der Webentwicklung bleibt JavaScript eine Eckpfeilertechnologie. Während Frameworks und Bibliotheken die Entwicklung vereinfachen können, bietet die Beherrschung von Vanilla JavaScript eine solide Grundlage für das Verständnis der Feinheiten der Sprache. Als Best Practice empfehle ich Entwicklern, insbesondere denen, die neu auf diesem Gebiet sind, sich auf die Verbesserung ihrer Vanilla-JavaScript-Kenntnisse zu konzentrieren, bevor sie Frameworks erkunden.

Die Bedeutung der Verfolgung des Benutzeranmeldestatus
Die effektive Verwaltung des Benutzeranmeldestatus ist entscheidend für die Gewährleistung der Sicherheit, Effizienz und des allgemeinen Benutzererlebnisses von Webanwendungen. Zu den Vorteilen der Implementierung der Benutzer-Login-Verfolgung gehören:

1. ERSTER TEIL
2. Erhöhte Sicherheit: Verhindern Sie unbefugten Zugriff auf sensible Daten, indem Sie Benutzer auffordern, sich anzumelden, bevor sie Zugriff erhalten. Optimierte Ressourcennutzung: Minimieren Sie unnötige Anfragen an den Server, indem Sie Daten lokal speichern und nur aktualisieren, wenn Änderungen auftreten.

• Datenintegrität: Stellen Sie die Datenkonsistenz sicher, indem Sie Änderungen, Ergänzungen und Löschungen kontrollieren.
  Verbesserte Benutzererfahrung: Nutzen Sie Zeitstempel, um inaktive Benutzer automatisch abzumelden, was die Sicherheit erhöht und die Benutzererfahrung optimiert.

• Nahtlose Serverinteraktion: Stellen Sie einen robusten Kommunikationskanal zwischen Client und Server her und ermöglichen Sie so einen effizienten Datenaustausch und eine effiziente Synchronisierung.

Durch die Implementierung eines gut konzipierten Benutzer-Login-Tracking-Systems können Entwickler die Sicherheit, Leistung und Gesamtqualität ihrer Webanwendungen erheblich verbessern.

1. ZWEITER TEIL:

Jetzt tauchen wir in den Code ein:

Ermöglicht zunächst einer Variablen den Zugriff auf den lokalen Speicher des Geräts:
const storage = window.localStorage;

Zweitens erstellen wir eine Variable, die den Wert der Anfangs-/Standarddaten hat.
Die gleichen Datenwerte werden immer dann aktualisiert, wenn neue Daten eingehen oder sich ändern.

hier ist die Variable:

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

1. DRITTER TEIL:

Jetzt erstellen wir eine Funktion zum Speichern von Daten im lokalen Gerätespeicher:

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

Jetzt erstellen wir unseren Hauptteil des Codes,
Das ist unsere Reduzierfunktion,

Diese Funktion ist für die Steuerung von Daten durch Einfügen, Aktualisieren und Löschen aus dem lokalen Speicher unseres Geräts verantwortlich.

Hier ist der Code:

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

Lassen Sie uns diesen Code Schritt für Schritt aufschlüsseln:
Funktionssignatur
JavaScript

function myReducer(state = initialState, action) {
  // ...
}

Dies ist eine Reduzierfunktion, die ein Schlüsselkonzept in Zustandsverwaltungsbibliotheken wie Redux darstellt. Der Reduzierer benötigt zwei Argumente:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

Switch-Anweisung
JavaScript

switch (action.type) {
  // ...
}

Diese Switch-Anweisung überprüft die Type-Eigenschaft des Aktionsobjekts und führt den entsprechenden Codeblock aus.
LOGIN-Fall

JavaScript

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

Wenn der action.type „LOGIN“ ist, ist der Reduzierer:

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

LOGOUT-Fall
JavaScript

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

Wenn der action.type „LOGOUT“ ist, ist der Reduzierer:

function myReducer(state = initialState, action) {
  // ...
}

Standardfall
JavaScript

Standard:
Rückgabestatus;

Wenn der action.type keinem der oben genannten Fälle entspricht, gibt der Reduzierer einfach den aktuellen Status zurück, ohne Änderungen vorzunehmen.
Zusammenfassend verwaltet diese Reduzierungsfunktion den Anmeldestatus des Benutzers, indem sie auf die Aktionen „LOGIN“ und „LOGOUT“ reagiert.

Abschließend, aber nicht zuletzt, folgt die Funktion, die als Ausgabe der korrekten Daten verwendet wird.
Wichtig: Wir sollten dieser Funktion den Export hinzufügen, damit sie in anderen Dateien verwendet werden kann. Da es sich hier jedoch um eine einzelne Datei handelt, ist dies nicht erforderlich. Sie können den Github-Link unten besuchen, um ein größeres Projekt mit der gleichen Funktionalität zu sehen.

Funktionalität zur Benutzerdatenverwaltung
In diesem Abschnitt untersuchen wir die Funktion userData.js, die eine entscheidende Rolle bei der Verwaltung von Benutzerdaten spielt.
userData-Funktionscode
JavaScript:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

Code-Aufschlüsselung
Lassen Sie uns die userData-Funktion Schritt für Schritt analysieren:
Funktionssignatur
JavaScript

switch (action.type) {
  // ...
}

Diese asynchrone Funktion, userData, akzeptiert zwei Parameter:

case "LOGIN":
  cacheUserData(action.payload);
  return {
    userData: action.payload,
    timestamp: Date.now(),
    isLoggedIn: true
  };

Benutzerdaten abrufen
JavaScript

Calls the cacheUserData function with the action.payload (which contains the user data).
Returns a new state object with the following properties:
    userData: The user data from the action.payload.
    timestamp: The current timestamp.
    isLoggedIn: Set to true.

Diese Zeile ruft mithilfe der fetchUserData-Funktion Benutzerdaten vom angegebenen URL-Link ab. Das Schlüsselwort „await“ stellt sicher, dass der Code auf die Auflösung des Versprechens wartet, bevor er fortfährt.
Aufruf des Reduzierers

JavaScript:

case "LOGOUT":
  storage.removeItem('exampleUserData');
  return {
    userData: null,
    timestamp: null,
    isLoggedIn: false
  };

Diese Zeile ruft die Funktion myReducer auf und übergibt:

Removes/dete the user data from storage using storage.removeItem.
Returns a new state object with the following properties:
    userData: Set to null.
    timestamp: Set to null.
    isLoggedIn: Set to false.

Der Reduzierer gibt ein neues Statusobjekt zurück, das der Statusvariablen zugewiesen wird.
Statuseigenschaften werden aktualisiert

JavaScript:

const userData = async (type) => {

    const userData = await myUserData;
    const state = myReducer(undefined, { type: type, payload: userData });

    state.timeStamp = state.timestamp;
    state.isLoggedIn = state.isLoggedIn;

    return state;
};

Diese Zeilen aktualisieren zwei Eigenschaften des Statusobjekts:

const userData = async (type) => {
  // ...
}

Den Staat zurückgeben
JavaScript

Zustand zurückgeben;

Schließlich gibt die Funktion das aktualisierte Statusobjekt zurück.
Beispielausgabe
Wenn wir die userData-Funktion mit verschiedenen Aktionen aufrufen, erhalten wir die folgende Ausgabe:
Anmeldedaten:
JSON

urlLink: A URL link used to fetch user data.
type: A string indicating the type of action (e.g., "LOGIN" or "LOGOUT").

Abmeldedaten:
JSON

const userData = await fetchUserData();

Wie Sie sehen, ist unser Code in der Lage, Daten zu entfernen, wenn sich der Benutzer abmeldet. Wir können den TimeStamp auch nutzen, um den Benutzer nach einer längeren Zeit der Inaktivität oder wenn der Website-Tab geschlossen wird, automatisch abzumelden.

Für einen vollständigen Code einschließlich Dom-Manipulation besuchen Sie den Github-Link:

https://github.com/TrevoDng/logig-status-monitor-frontend

Das obige ist der detaillierte Inhalt vonVanilla JavaScript-Anmeldestatusmonitor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!