> 백엔드 개발 > PHP 문제 > 로그인 페이지로 이동하여 php+js로 새로 고치는 방법

로그인 페이지로 이동하여 php+js로 새로 고치는 방법

PHPz
풀어 주다: 2023-03-29 14:54:47
원래의
528명이 탐색했습니다.

웹 애플리케이션을 개발할 때 JS의 로그인 페이지로 이동하여 새로 고쳐야 하는 상황에 자주 직면합니다. 이 기사에서는 PHP와 JS를 사용하여 이를 달성하는 방법을 설명합니다.

1. 로그인 페이지 만들기 먼저 사용자가 사용자 이름과 비밀번호를 입력할 수 있는 로그인 페이지를 만들어야 합니다. 이 페이지에는 사용자 이름과 비밀번호를 입력하기 위한 텍스트 상자와 제출 버튼이 있는 HTML 양식이 포함되어야 합니다.

PHP에서는 '세션'을 사용하여 다른 페이지에서 액세스할 수 있도록 사용자 정보를 저장할 수 있습니다. 따라서 사용자가 성공적으로 로그인한 후에는 사용자 이름을 `session`에 저장해야 합니다. PHP에서는 다음 코드를 사용할 수 있습니다:

 ```
session_start(); // Start the session
$_SESSION['username'] = $username; // Store the username in the session
```
로그인 후 복사

2. 사용자가 로그인되어 있는지 확인하세요. JS가 로그인 페이지로 이동하기 전에 사용자가 로그인되어 있는지 확인해야 합니다. 여기서는 PHP 함수 `isset()`을 사용하여 `session` 변수에 사용자 이름이 있는지 확인할 수 있습니다. 사용자 이름이 존재하면 해당 사용자가 로그인되었음을 의미합니다. 존재하지 않는 경우 사용자를 로그인 페이지로 리디렉션해야 합니다.

다음은 사용자가 로그인했는지 확인하는 샘플 코드입니다.

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

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

3.JS에서 로그인 페이지로 이동하여 새로고침하세요. 이제 사용자가 로그인했는지 확인했으므로 다음 단계는 JS가 로그인 페이지로 이동하여 새로 고치도록 하는 것입니다. JS의 `window.location.href` 메소드를 사용하여 대상 URL로 이동할 수 있습니다.

이 예에서는 `login.php` 페이지로 이동해야 하며 코드는 다음과 같아야 합니다.

 ```
window.location.href = "login.php";
```
로그인 후 복사

점프가 완료되면 페이지를 새로 고쳐 `session`에서 업데이트된 사용자 정보를 검색해야 합니다. `location.reload()` 메소드를 사용하여 현재 페이지를 새로 고칠 수 있습니다.

전체 JS 코드는 다음과 같습니다.

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

4. 다음은 로그인 페이지로 이동하고 새로 고치는 기능을 구현하는 완전한 PHP 및 JS 코드입니다: 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>
```
로그인 후 복사

이 예에서는 `sessionStorage`를 사용하여 사용자가 로그인했는지 확인합니다. . `session`과 유사한 데이터를 저장하기 위한 JavaScript API입니다.

다음 코드를 사용하여 `sessionStorage`에 사용자 이름을 저장할 수 있습니다:

 ```
sessionStorage.setItem(&#39;loggedIn&#39;, &#39;true&#39;);
```
로그인 후 복사

5. 요약

이 기사에서는 PHP와 JS를 사용하여 로그인 페이지로 이동하고 새로 고치는 예제를 구현했습니다. 먼저 사용자가 로그인되어 있는지 확인한 다음 JS를 사용하여 로그인 페이지로 이동하고 새로 고쳐 '세션'에서 업데이트된 사용자 정보를 검색해야 합니다. 이 기능은 승인되지 않은 사용자를 적절하게 처리할 수 있으므로 웹 애플리케이션의 보안을 보장하는 데 매우 중요합니다.

위 내용은 로그인 페이지로 이동하여 php+js로 새로 고치는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿