recherche

Maison >développement back-end >Problème PHP >Comment accéder à la page de connexion et l'actualiser avec php+js

Comment accéder à la page de connexion et l'actualiser avec php+js

PHPz
PHPzoriginal
2023-03-29 10:09:30523parcourir

Lors du développement d'applications Web, nous rencontrons souvent des situations dans lesquelles nous devons accéder à la page de connexion dans JS et l'actualiser. Cet article explique comment y parvenir en utilisant PHP et JS.

1. Créez une page de connexion Tout d’abord, nous devons créer une page de connexion permettant aux utilisateurs de saisir leur nom d’utilisateur et leur mot de passe. Cette page doit contenir un formulaire HTML avec des zones de texte pour saisir le nom d'utilisateur et le mot de passe et un bouton de soumission.

En PHP, nous pouvons utiliser « session » pour stocker les informations utilisateur afin d'y accéder dans d'autres pages. Par conséquent, une fois que l'utilisateur s'est connecté avec succès, nous devons stocker son nom d'utilisateur dans « session ». En PHP on peut utiliser le code suivant : 

 ```
session_start(); // Start the session
$_SESSION['username'] = $username; // Store the username in the session
```

2. Vérifiez si l'utilisateur est connecté Avant de laisser le JS accéder à la page de connexion, nous devons vérifier si l'utilisateur est connecté. Ici, nous pouvons utiliser la fonction PHP `isset()` pour vérifier si le nom d'utilisateur dans la variable `session` existe. Si le nom d'utilisateur existe, cela signifie que l'utilisateur est connecté. S'il n'existe pas, nous devons rediriger l'utilisateur vers la page de connexion.

Voici l'exemple de code pour vérifier si l'utilisateur est connecté : 

 ```
session_start(); // Start the session

if(!isset($_SESSION['username'])) {
    header("Location: login.php"); // Redirect to login page
    exit();
}
```

3 Accédez à la page de connexion dans JS et actualisez. Maintenant que nous avons vérifié si l'utilisateur est connecté, l'étape suivante consiste à faire en sorte que le JS accède à la page de connexion et l'actualise. Nous pouvons utiliser la méthode `window.location.href` de JS pour accéder à l'URL cible.

Dans cet exemple, nous devons accéder à la page `login.php`, notre code devrait être : 

 ```
window.location.href = "login.php";
```

Lorsque le saut est terminé, nous devons actualiser la page pour récupérer les informations utilisateur mises à jour de `session` . Nous pouvons utiliser la méthode `location.reload()` pour actualiser la page actuelle.

Le code JS complet est le suivant : 

 ```
if(!isset($_SESSION['username'])) {
    window.location.href = "login.php";
    location.reload();
    exit();
}
```

4. Voici le code PHP et JS complet pour implémenter la fonction permettant d'accéder à la page de connexion et de l'actualiser : index.php : 

```php
<?php
session_start(); // Start the session

if(!isset($_SESSION[&#39;username&#39;])) {
    header("Location: login.php"); // Redirect to login page
    exit();
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
    <script type="text/javascript">
        if(!sessionStorage.getItem(&#39;loggedIn&#39;)) {
            window.location.href = "login.php";
            location.reload();
            exit();
        }
    </script>
</head>
<body>
    <h1>Welcome, <?php echo $_SESSION[&#39;username&#39;]; ?></h1>
    <p>Thank you for logging in.</p>
</body>
</html>
```

login.php:

```php
<?php
session_start(); // Start the session

if(isset($_POST[&#39;submit&#39;])) {
    $username = $_POST[&#39;username&#39;];
    $password = $_POST[&#39;password&#39;];

    // Check if username and password are correct
    if($username == "admin" && $password == "password") {
        $_SESSION[&#39;username&#39;] = $username; // Store the username in the session
        header("Location: index.php"); // Redirect to index page
        exit();
    } else {
        $errorMessage = "Invalid username or password";
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <?php if(isset($errorMessage)) { ?>
        <p><?php echo $errorMessage; ?></p>
    <?php } ?>
    <form method="post">
        <p>
            <label for="username">Username:</label><br>
            <input type="text" name="username" id="username">
        </p>
        <p>
            <label for="password">Password:</label><br>
            <input type="password" name="password" id="password">
        </p>
        <p>
            <input type="submit" name="submit" value="Login">
        </p>
    </form>
</body>
</html>
```

Notez que dans cet exemple, nous utilisons `sessionStorage` pour vérifier si l'utilisateur est connecté . Il s'agit d'une API JavaScript pour stocker des données similaires à la « session ».

Nous pouvons utiliser le code suivant pour stocker le nom d'utilisateur dans `sessionStorage` : 

 ```
sessionStorage.setItem(&#39;loggedIn&#39;, &#39;true&#39;);
```

5. Résumé

Dans cet article, nous avons implémenté un exemple de passage à la page de connexion et de son actualisation en utilisant PHP et JS. Tout d'abord, nous devons vérifier si l'utilisateur est connecté, puis utiliser JS pour accéder à la page de connexion et actualiser pour récupérer les informations utilisateur mises à jour de la « session ». Cette fonctionnalité est très importante pour garantir la sécurité des applications Web, car elle peut gérer efficacement les utilisateurs non autorisés.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment remplacer un certain caractère en phpArticle suivant：Comment remplacer un certain caractère en php

Articles Liés

Voir plus