ホームページ > バックエンド開発 > PHPの問題 > ログインページにジャンプしてphp+jsで更新する方法

ログインページにジャンプしてphp+jsで更新する方法

PHPz
リリース: 2023-03-29 14:54:47
オリジナル
522 人が閲覧しました

Web アプリケーションを開発していると、JS でログイン ページにジャンプして更新する必要がある状況によく遭遇します。この記事では、PHP と JS を使用してこれを実現する方法について説明します。

1. ログインページを作成する まず、ユーザーがユーザー名とパスワードを入力するためのログイン ページを作成する必要があります。このページには、ユーザー名とパスワードを入力するためのテキスト ボックスと送信ボタンを備えた HTML フォームが含まれている必要があります。

PHP では、「セッション」を使用して、他のページにアクセスするためのユーザー情報を保存できます。したがって、ユーザーが正常にログインした後、ユーザー名を「セッション」に保存する必要があります。 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` を使用していることに注意してください。ユーザーがログインしている場合。これは「セッション」と同様にデータを保存するための JavaScript API です。

次のコードを使用して、ユーザー名を `sessionStorage` に保存できます:

 ```
sessionStorage.setItem(&#39;loggedIn&#39;, &#39;true&#39;);
```
ログイン後にコピー

5. 概要

この記事では、PHP と JS を使用しました。ログインページにジャンプして更新する例を実装しました。まず、ユーザーがログインしているかどうかを確認し、次に JS を使用してログイン ページにジャンプし、更新して「セッション」から更新されたユーザー情報を取得する必要があります。この機能は、権限のないユーザーを適切に処理できるため、Web アプリケーションのセキュリティを確保するために非常に重要です。

以上がログインページにジャンプしてphp+jsで更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート