Moniteur d'état de connexion JavaScript Vanilla-js tutoriel-php.cn

Introduction

Dans le domaine du développement Web, JavaScript reste une technologie fondamentale. Bien que les frameworks et les bibliothèques puissent simplifier le développement, la maîtrise de Vanilla JavaScript fournit une base solide pour comprendre les subtilités du langage. À titre de bonne pratique, je recommande aux développeurs, en particulier à ceux qui débutent dans le domaine, de se concentrer sur le perfectionnement de leurs compétences en Vanilla JavaScript avant d'explorer les frameworks.

L'importance du suivi de l'état de connexion des utilisateurs
La gestion efficace du statut de connexion des utilisateurs est cruciale pour garantir la sécurité, l’efficacité et l’expérience utilisateur globale des applications Web. Les avantages de la mise en œuvre du suivi des connexions des utilisateurs incluent :

PREMIÈRE PARTIE
Sécurité améliorée : empêchez tout accès non autorisé aux données sensibles en exigeant que les utilisateurs se connectent avant d'y accéder. Utilisation optimisée des ressources : minimisez les requêtes inutiles adressées au serveur en stockant les données localement et en les mettant à jour uniquement lorsque des changements se produisent.

Intégrité des données : garantissez la cohérence des données en contrôlant les modifications, les ajouts et les suppressions.
Expérience utilisateur améliorée : utilisez des horodatages pour déconnecter automatiquement les utilisateurs inactifs, améliorant ainsi la sécurité et rationalisant l'expérience utilisateur.
Interaction transparente avec le serveur : établissez un canal de communication robuste entre le client et le serveur, permettant un échange et une synchronisation efficaces des données.

En mettant en œuvre un système de suivi des connexions des utilisateurs bien conçu, les développeurs peuvent améliorer considérablement la sécurité, les performances et la qualité globale de leurs applications Web.

DEUXIÈME PARTIE :

Maintenant, plongeons-nous dans le code :

Tout d'abord, permet à une variable d'accéder au stockage local de l'appareil :
const stockage = window.localStorage;

Deuxièmement, nous allons créer une variable qui a la valeur des données initiales/par défaut.
Les mêmes valeurs de données seront mises à jour chaque fois que de nouvelles données arriveront ou seront modifiées.

voici la variable :

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

Copier après la connexion

TROISIÈME PARTIE :

créons maintenant une fonction pour enregistrer les données dans le stockage local de l'appareil :

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

Copier après la connexion

créons maintenant notre partie principale du code,
qui est notre fonction réductrice,

cette fonction sera chargée de contrôler les données par insertion, mise à jour, suppression du stockage local de notre appareil.

Voici le 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;
  }
};

Copier après la connexion

Décomposons ce code étape par étape :
Signature de fonction
JavaScript

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

Copier après la connexion

Il s'agit d'une fonction de réduction, qui est un concept clé dans les bibliothèques de gestion d'état comme Redux. Le réducteur prend deux arguments :

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.

Copier après la connexion

Déclaration de changement
JavaScript

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

Copier après la connexion

Cette instruction switch vérifie la propriété type de l'objet d'action et exécute le bloc de code correspondant.
Cas de connexion

Vanilla JavaScript Login Status Monitor
JavaScript

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

Copier après la connexion

Lorsque le action.type est "LOGIN", le réducteur :

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

Copier après la connexion

Cas DE DÉCONNEXION
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;
  }
};

Copier après la connexion

Lorsque l'action.type est "LOGOUT", le réducteur :

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

Copier après la connexion

Cas par défaut
JavaScript

par défaut :
état de retour ;

Si le action.type ne correspond à aucun des cas ci-dessus, le réducteur renvoie simplement l'état actuel sans apporter de modifications.
En résumé, cette fonction de réduction gère l'état de connexion de l'utilisateur en répondant aux actions "LOGIN" et "LOGOUT".

Enfin, mais non le moindre, voici la fonction qui sera utilisée comme sortie des données correctes.
Important : Nous devions ajouter l'exportation à cette fonction afin qu'elle puisse être utilisée dans d'autres fichiers, mais comme ici elle se trouve dans un seul fichier, nous n'avons pas besoin de le faire. Vous pouvez visiter le lien github ci-dessous pour voir un projet plus important ayant les mêmes fonctionnalités.

Fonctionnalité de gestion des données utilisateur
Dans cette section, nous explorerons la fonction userData.js, qui joue un rôle crucial dans la gestion des données utilisateur.
Code de fonction userData
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.

Copier après la connexion

Répartition des codes
Découpons la fonction userData étape par étape :
Signature de fonction
JavaScript

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

Copier après la connexion

Cette fonction asynchrone, userData, accepte deux paramètres :

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

Copier après la connexion

Récupération des données utilisateur
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.

Copier après la connexion

Cette ligne récupère les données utilisateur à partir de l'urlLink spécifié à l'aide de la fonction fetchUserData. Le mot-clé wait garantit que le code attend que la promesse soit résolue avant de continuer.
Appeler le réducteur

JavaScript :

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

Copier après la connexion

Cette ligne appelle la fonction myReducer, en passant :

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.

Copier après la connexion

Le réducteur renvoie un nouvel objet d'état, qui est affecté à la variable d'état.
Mise à jour des propriétés de l'État

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

Copier après la connexion

Ces lignes mettent à jour deux propriétés de l'objet state :

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

Copier après la connexion

Rendre l'État
JavaScript

état de retour ;

Enfin, la fonction renvoie l'objet d'état mis à jour.
Exemple de sortie
Lorsque nous appelons la fonction userData avec différentes actions, nous obtenons le résultat suivant :
Données de connexion :
JSON

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

Copier après la connexion

Données de déconnexion :
JSON

const userData = await fetchUserData();

Copier après la connexion

Comme vous pouvez le constater, notre code est capable de supprimer des données lorsque l'utilisateur se déconnecte. Nous pouvons également utiliser le timeStamp pour déconnecter automatiquement l'utilisateur après une période d'inactivité prolongée ou lorsque l'onglet du site Web est fermé.

Pour un code complet incluant la manipulation dom, visitez le lien github :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!