Page de saut de connexion HTML-Golang-php.cn

Page de saut de connexion HTML

WBOY

Libérer： 2023-05-09 10:48:37

original

2280 Les gens l'ont consulté

Dans le développement Web, la page de saut de connexion est une fonction courante. Une fois que l'utilisateur s'est connecté une fois, afin de faciliter la navigation de l'utilisateur sur le contenu du site Web et d'éviter à l'utilisateur d'avoir à saisir à nouveau les informations de connexion à chaque fois qu'il visite une nouvelle page, nous concevons généralement une page de renvoi pour enregistrer les informations de connexion de l'utilisateur. informations de connexion dans une session afin que l'utilisateur puisse continuer à parcourir le contenu du site Web.

Dans cet article, nous présenterons comment utiliser HTML et JavaScript pour implémenter une page de renvoi de connexion.

Créer une page HTML

Tout d'abord, nous devons créer une page HTML. Vous pouvez créer un fichier HTML vierge directement dans l'éditeur de code, puis ajouter le code suivant :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Redirect Page</title>
</head>
<body>
  <h1>Login Redirect Page</h1>
  <p>Please wait while you are being redirected...</p>
</body>
</html>

Copier après la connexion

Dans cette page HTML, nous avons créé un titre et un message d'invite. Cette page ne contient aucun formulaire de connexion car nous ajouterons cette fonctionnalité dans une autre page.

Créer une page de connexion

Ensuite, nous devons créer une page de connexion. Vous pouvez continuer à écrire le code dans le même fichier HTML ou créer un nouveau fichier HTML et y copier-coller le code. Voici un exemple simple de formulaire de connexion :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
</head>
<body>
  <h1>Login Page</h1>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <button type="submit" onclick="login()">Login</button>
  </form>
  
  <script>
    function login() {
      // Get the input fields
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      
      // Set the session storage values
      sessionStorage.setItem("username", username);
      sessionStorage.setItem("password", password);
      
      // Redirect to the homepage
      window.location.replace("homepage.html");
    }
  </script>
</body>
</html>

Copier après la connexion

Dans cette page de connexion, nous avons créé un formulaire avec des zones de saisie du nom d'utilisateur et du mot de passe et un bouton d'envoi. Lorsque l'utilisateur clique sur le bouton « Connexion », nous enregistrons le nom d'utilisateur et le mot de passe qu'il a saisis dans le stockage de session, puis redirigeons l'utilisateur vers une page appelée « homepage.html » via la fonction window.location.replace() en JavaScript.

Implémentation de la page de saut

Dans la première étape, nous avons créé une page HTML vierge nommée "login-redirect.html". Nous devons maintenant y ajouter un script JavaScript qui, lorsque la page se charge, vérifie si l'utilisateur est déjà connecté et le redirige vers la bonne page en fonction de l'état de connexion.

Voici un exemple JavaScript simple qui implémente cette fonctionnalité :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Redirect Page</title>
</head>
<body>
  <h1>Login Redirect Page</h1>
  <p>Please wait while you are being redirected...</p>
  
  <script>
    // Check if the user is logged in
    var username = sessionStorage.getItem("username");
    var password = sessionStorage.getItem("password");
    
    if (username == null || password == null) {
      // Redirect to the login page
      window.location.replace("login.html");
    } else {
      // Redirect to the homepage
      window.location.replace("homepage.html");
    }
  </script>
</body>
</html>

Copier après la connexion

Dans ce script, nous déterminons d'abord si l'utilisateur est connecté en vérifiant si le nom d'utilisateur et le mot de passe existent dans le stockage de la session. Si l'utilisateur n'est pas connecté, redirigez-le vers une page de connexion appelée « login.html », sinon redirigez-le vers une page appelée « homepage.html ».

Test de la page de raccourci de connexion

Maintenant, nous avons terminé l'écriture du code HTML et JavaScript pour la page de raccourci de connexion. Nous pouvons lancer ces pages sur un serveur local ou distant et les tester pour nous assurer qu'elles remplissent correctement la fonction de redirection de connexion.

Nous pouvons d'abord essayer d'accéder à notre page "homepage.html" sans saisir de nom d'utilisateur et de mot de passe et vérifier si elle redirige vers la page de connexion. Ensuite, nous pouvons saisir un nom d'utilisateur et un mot de passe arbitraires dans la page de connexion et vérifier s'ils sont correctement enregistrés dans le stockage de session et redirigés vers la page "homepage.html".

Résumé

Dans cet article, nous avons présenté comment utiliser HTML et JavaScript pour implémenter une page de renvoi de connexion. Nous avons d'abord créé une page de renvoi vierge et écrit du code JavaScript dessus pour vérifier si l'utilisateur est connecté lors du chargement de la page et le rediriger vers la bonne page. Après cela, nous avons créé une page HTML contenant le formulaire de connexion et y avons ajouté du code JavaScript pour enregistrer le nom d'utilisateur et le mot de passe saisis par l'utilisateur dans le stockage de session lorsqu'il clique sur le bouton "Connexion" et les rediriger vers la page de saut Tourner. Enfin, nous nous assurons qu'ils remplissent correctement la fonction de redirection de connexion en lançant ces pages sur un serveur local ou distant et en les testant.

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!