- 締切済み
Jquery Mobileでのページ表示について
Jquery Mobile初心者です。 ページ表示についての質問ですが、 ファイルtest.htmlに下記のようにコードを書きました。 ログインのページを通してから、indexのページを表示したいと思っていますが、 ブラウザのアドレスバーに....../test.html#indexと入力すると、 indexのページがそのまま表示されてしまいます。 これではログインページをつける意味がなくなってしまいます。 アドレスバーに....../test.html#indexを入力しても、indexのページが表示されない (ログインページを表示する)ようにするには、どうしたらいいでしょうか？ ご教授をよろしくお願いします。 ------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="login" data-role="page"> <header data-role="header" data-position="fixed"> <h1>ログイン</h1> </header> <div data-role="content"> <div data-role="fieldcontain" class="noborder"> <label for="inputLoginId">ログインID:</label> <input type="text" name="inputLoginId" id="inputLoginId" value="" placeholder="ログインIDを入力" /> <label for="inputPwd">パスワード:</label> <input type="password" name="inputPwd" id="inputPwd" value="" placeholder="パスワードを入力" /> </div> <input type="button" id="loginBtn" value="ログイン" data-theme="f" /> </div> </div> <div id="index" data-role="page"> <header data-role="header" data-position="fixed"> <h1>テスト</h1> </header> <div data-role="content"> <p>メインページ</p> </div> </div> <div id="TR" data-role="page"> <header data-role="header" data-position="fixed"> <a href="#index" data-icon="back" onclick="backPrc()">戻る</a> <a href="#index" data-icon="home" onclick="homePrc()">ホーム</a> </header> <div data-role="content"> <p>サブページ</p> </div> </div> </body> </html> ------------------------------------------------------------
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- y_shimizu
- ベストアンサー率41% (27/65)
サーバサイドを見ないとなんとも言えませんが、ログイン認証とセッション永続はどのように行っているのでしょうか？ 一般的には、ログイン認証されたことを表す何か（セッションクッキーとか）が付与されていない状態で要認証ページを表示しようとした場合、ログインページにリダイレクトなりをするって感じですね。
お礼
ご回答ありがとうございます。 お恥ずかしいながら、サーバーのこともよくわかっていません。 今、サーバ側では何も処理をやっていません。 ログイン処理は下記のようにしていますが、 このやり方自体、安全ではないですよね？？ 大変申し訳ございませんが、ログイン認証、サーバー側でやらなければならないことをご教授いただけますでしょうか？ よろしくお願いします。 -------------------------------------------------- $('#login').live('pageinit', function () { $(this).on("tap", "#loginBtn", function (e) { var inputLoginId = $("#inputLoginId").val(); var inputPwd = $("#inputPwd").val(); $.ajax({ type: "POST", url: "login.php", data: { login_id: inputLoginId, pwd: inputPwd }, success: function (response) { // 通信が成功した場合 if (response == 1) // 成功の場合 { $.mobile.changePage($('#index')); } else // 失敗の場合 { alert("ログイン失敗。"); } }, error: function (response, errorThrown) { // 通信が失敗した場合 alert('Error : ' + errorThrown); } }); }); }); -------------------------------------------------- login.phpでは下記のようにしています。 -------------------------------------------------- <?php define("LOGINID", "idea"); define("PASSWORD", "estimate"); $result = true; // 処理結果 true=正常、false=異常 $login_id = $_POST['login_id']; if (strcmp(LOGINID,$login_id)!=0) { $result = false; } $pwd = $_POST['pwd']; if (strcmp(PASSWORD, $pwd) != 0) { $result = false; } echo $result; ?> --------------------------------------------------