Home >Backend Development >PHP Problem >How to jump to the login page and refresh it with php+js
How to jump to the login page and refresh it with php+js
- PHPzOriginal
- 2023-03-29 10:09:30523browse
When developing web applications, we often encounter situations where we need to jump to the login page in JS and refresh it. This article explains how to achieve this using PHP and JS.
1. Create a login page
First, we need to create a login page for users to enter their username and password. This page should contain an HTML form with text boxes for entering username and password and a submit button.
In PHP, we can use `session` to store user information for access in other pages. Therefore, after the user successfully logs in, we should store their username into `session`. In PHP, we can use the following code:
``` session_start(); // Start the session $_SESSION['username'] = $username; // Store the username in the session ```
2. Check if the user is logged in
Before we let the JS jump to the login page, we need to check if the user is logged in. Here, we can use the PHP function `isset()` to check if the username in the `session` variable exists. If the username exists, it means the user is logged in. If it doesn't exist, we should redirect the user to the login page.
The following is a sample code to check whether the user is logged in:
```
session_start(); // Start the session
if(!isset($_SESSION['username'])) {
header("Location: login.php"); // Redirect to login page
exit();
}
```3. Jump to the login page in JS and refresh Now that we have checked whether the user is logged in, the next step is to have the JS jump to the login page and refresh it. We can use JS’s `window.location.href` method to jump to the target URL.
In this example, we need to jump to the `login.php` page, our code should be:
``` window.location.href = "login.php"; ```
When the jump is completed, we need to refresh the page to start from `session `Retrieve updated user information. We can use the `location.reload()` method to refresh the current page.
The complete JS code is as follows:
```
if(!isset($_SESSION['username'])) {
window.location.href = "login.php";
location.reload();
exit();
}
```4. Complete code
The following is the complete PHP and JS code to implement the function of jumping to the login page and refreshing it: 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>
```Note that in this example, we use `sessionStorage` to Check if the user is logged in. This is a JavaScript API for storing data similar to `session`.
We can use the following code to store the username into `sessionStorage`:
``` sessionStorage.setItem('loggedIn', 'true'); ```
5. Summary
In this article, we have used PHP and JS Implemented an example of jumping to the login page and refreshing it. First, we need to check if the user is logged in, then use JS to jump to the login page and refresh to retrieve the updated user information from `session`. This feature is very important to ensure the security of web applications as it can handle unauthorized users gracefully.
The above is the detailed content of How to jump to the login page and refresh it with php+js. For more information, please follow other related articles on the PHP Chinese website!