So springen Sie zur Anmeldeseite und aktualisieren sie mit php+js

PHPz
Freigeben: 2023-03-29 14:54:47
Original
498 Leute haben es durchsucht

Bei der Entwicklung von Webanwendungen stoßen wir häufig auf Situationen, in denen wir zur Anmeldeseite in JS springen und diese aktualisieren müssen. In diesem Artikel wird erklärt, wie Sie dies mit PHP und JS erreichen.

1. Erstellen Sie eine Anmeldeseite Zuerst müssen wir eine Anmeldeseite erstellen, auf der Benutzer ihren Benutzernamen und ihr Passwort eingeben können. Diese Seite sollte ein HTML-Formular mit Textfeldern zur Eingabe von Benutzername und Passwort sowie einer Schaltfläche zum Senden enthalten.

In PHP können wir „Sitzung“ verwenden, um Benutzerinformationen für den Zugriff auf anderen Seiten zu speichern. Daher sollten wir nach erfolgreicher Anmeldung des Benutzers seinen Benutzernamen in „Sitzung“ speichern. In PHP können wir den folgenden Code verwenden:

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

2. Überprüfen Sie, ob der Benutzer angemeldet ist Bevor wir den JS zur Anmeldeseite springen lassen, müssen wir prüfen, ob der Benutzer angemeldet ist. Hier können wir die PHP-Funktion „isset()“ verwenden, um zu prüfen, ob der Benutzername in der Variablen „session“ existiert. Wenn der Benutzername vorhanden ist, bedeutet dies, dass der Benutzer angemeldet ist. Wenn es nicht existiert, sollten wir den Benutzer zur Anmeldeseite umleiten.

Hier ist der Beispielcode, um zu überprüfen, ob der Benutzer angemeldet ist:

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

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

3. Springen Sie zur Anmeldeseite in JS und aktualisieren Sie sie Nachdem wir nun überprüft haben, ob der Benutzer angemeldet ist, besteht der nächste Schritt darin, dass der JS zur Anmeldeseite springt und diese aktualisiert. Wir können die Methode „window.location.href“ von JS verwenden, um zur Ziel-URL zu springen.

In diesem Beispiel müssen wir zur Seite „login.php“ springen. Unser Code sollte lauten:

 ```
window.location.href = "login.php";
```
Nach dem Login kopieren

Wenn der Sprung abgeschlossen ist, müssen wir die Seite aktualisieren, um die aktualisierten Benutzerinformationen aus „session“ abzurufen. Wir können die Methode „location.reload()“ verwenden, um die aktuelle Seite zu aktualisieren.

Der vollständige JS-Code lautet wie folgt:

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

4 Im Folgenden finden Sie den vollständigen PHP- und JS-Code zur Implementierung der Funktion, zur Anmeldeseite zu springen und diese zu aktualisieren: 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>
```
Nach dem Login kopieren

Beachten Sie, dass wir in diesem Beispiel „sessionStorage“ verwenden, um zu überprüfen, ob der Benutzer angemeldet ist . Dies ist eine JavaScript-API zum Speichern von Daten ähnlich einer „Sitzung“.

Wir können den folgenden Code verwenden, um den Benutzernamen in „sessionStorage“ zu speichern:

 ```
sessionStorage.setItem(&#39;loggedIn&#39;, &#39;true&#39;);
```
Nach dem Login kopieren

5. Zusammenfassung

In diesem Artikel haben wir ein Beispiel für den Sprung zur Anmeldeseite und deren Aktualisierung mithilfe von PHP und JS implementiert. Zuerst müssen wir prüfen, ob der Benutzer angemeldet ist, dann mit JS zur Anmeldeseite springen und aktualisieren, um die aktualisierten Benutzerinformationen aus „Sitzung“ abzurufen. Diese Funktion ist sehr wichtig, um die Sicherheit von Webanwendungen zu gewährleisten, da sie problemlos mit nicht autorisierten Benutzern umgehen kann.

Das obige ist der detaillierte Inhalt vonSo springen Sie zur Anmeldeseite und aktualisieren sie mit php+js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage