Bagaimana untuk melompat ke halaman log masuk dan muat semula dengan php+js

PHPz
Lepaskan: 2023-03-29 14:54:47
asal
498 orang telah melayarinya

Apabila membangunkan aplikasi web, kami sering menghadapi situasi di mana kami perlu melompat ke halaman log masuk dalam JS dan menyegarkannya. Artikel ini menerangkan cara untuk mencapai ini menggunakan PHP dan JS.

1. Buat halaman log masuk Pertama, kita perlu membuat halaman log masuk untuk pengguna memasukkan nama pengguna dan kata laluan mereka. Halaman ini harus mengandungi borang HTML dengan kotak teks untuk memasukkan nama pengguna dan kata laluan dan butang hantar.

Dalam PHP, kami boleh menggunakan `session` untuk menyimpan maklumat pengguna untuk akses di halaman lain. Oleh itu, selepas pengguna berjaya log masuk, kita harus menyimpan nama pengguna mereka ke dalam `session`. Dalam PHP, kita boleh menggunakan kod berikut:

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

2. Semak sama ada pengguna telah log masuk Sebelum kita membiarkan JS melompat ke halaman log masuk, kita perlu menyemak sama ada pengguna telah log masuk. Di sini, kita boleh menggunakan fungsi PHP `isset()` untuk menyemak sama ada nama pengguna dalam pembolehubah `session` wujud. Jika nama pengguna wujud, ia bermakna pengguna telah log masuk. Jika ia tidak wujud, kami harus mengubah hala pengguna ke halaman log masuk.

Berikut ialah contoh kod untuk menyemak sama ada pengguna telah log masuk:

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

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

3. Lompat ke halaman log masuk dalam JS dan muat semula Sekarang setelah kami menyemak sama ada pengguna telah log masuk, langkah seterusnya ialah meminta JS melompat ke halaman log masuk dan menyegarkannya. Kami boleh menggunakan kaedah `window.location.href` JS untuk melompat ke URL sasaran.

Dalam contoh ini, kita perlu melompat ke halaman `login.php`, kod kita hendaklah:

 ```
window.location.href = "login.php";
```
Salin selepas log masuk

Apabila lompatan selesai, kita perlu memuat semula halaman tersebut ke mulakan daripada Dapatkan maklumat pengguna yang dikemas kini dalam `sesi`. Kita boleh menggunakan kaedah `location.reload()` untuk memuat semula halaman semasa.

Kod JS lengkap adalah seperti berikut:

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

Kod lengkap Berikut ialah kod PHP dan JS lengkap untuk melaksanakan fungsi melompat ke halaman log masuk dan menyegarkannya: 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>
```
Salin selepas log masuk

Perhatikan bahawa dalam contoh ini, kami menggunakan `sessionStorage ` untuk menyemak sama ada pengguna telah log masuk. Ini ialah API JavaScript untuk menyimpan data yang serupa dengan `session`.

Kami boleh menyimpan nama pengguna ke dalam `sessionStorage` menggunakan kod berikut:

 ```
sessionStorage.setItem(&#39;loggedIn&#39;, &#39;true&#39;);
```
Salin selepas log masuk

5 Ringkasan

Dalam artikel ini, kami telah menggunakan PHP Dilaksanakan. contoh melompat ke halaman log masuk dan menyegarkannya dengan JS. Mula-mula, kita perlu menyemak sama ada pengguna telah log masuk, kemudian gunakan JS untuk melompat ke halaman log masuk dan muat semula untuk mendapatkan semula maklumat pengguna yang dikemas kini daripada `session`. Ciri ini sangat penting untuk memastikan keselamatan aplikasi web kerana ia boleh mengendalikan pengguna yang tidak dibenarkan dengan anggun.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke halaman log masuk dan muat semula dengan php+js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan