Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk melompat ke halaman log masuk dan muat semula dengan php+js
Bagaimana untuk melompat ke halaman log masuk dan muat semula dengan php+js
- PHPzasal
- 2023-03-29 10:09:30497semak imbas
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 ```
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();
}
```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"; ```
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();
}
```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['username'])) {
header("Location: login.php"); // Redirect to login page
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<script type="text/javascript">
if(!sessionStorage.getItem('loggedIn')) {
window.location.href = "login.php";
location.reload();
exit();
}
</script>
</head>
<body>
<h1>Welcome, <?php echo $_SESSION['username']; ?></h1>
<p>Thank you for logging in.</p>
</body>
</html>
```
login.php:
```php
<?php
session_start(); // Start the session
if(isset($_POST['submit'])) {
$username = $_POST['username'];
$password = $_POST['password'];
// Check if username and password are correct
if($username == "admin" && $password == "password") {
$_SESSION['username'] = $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>
```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('loggedIn', 'true'); ```
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!