1

ログインしているユーザーのみが利用できる jquery モバイル サイトを開発しています。

サーバーのログイン状態をチェックする機能があります。

function checkLogin() {
    $(function () {
        $.getJSON(root_url + 'manageUsers/checklogin/?callback=?', null,
            function (data) {
                if (data.logged == 'false') {
                    $("#index_Container").html("<h2>Login Required</h2></div><p>We've noticed you're not logged in, please login to use this app.</p><p><a href='login.html' data-role='button'>Click here to login</a></p>").trigger('create');
                    $.mobile.changePage('login.html');
                } else {
                    $(".logged_in").text(data.username);
                    $(".logged_in").addClass('logout');
                    $(".header_div").trigger('create');
                }
            });
    });
}

これを実装する方法がわからないので、インデックス ページが読み込まれ、他のページが読み込まれるたびに、ページに他のものをレンダリングする前にこれが起動されます。現在、ページは HTML をロードして表示し、次に $.mobile.changePage('login.html') を実行します。

編集:誰かがこれをより良い方法で実装する方法についてアイデアを持っている場合は、アプリのすべてのページでユーザーがログインする必要があります.

4

1 に答える 1

0

新しいページをロードするたびにこの関数を実行するには、この関数をpagebeforeloadイベントにバインドする必要があります。ログインが検証されない場合は、ユーザーナビゲーションをキャンセルする可能性があります。

$( document ).bind( "pagebeforeshow", function( event, data ){
  event.preventDefault(); //prevents usual load of page
  checkLogin(data);
});

特にページがまだ存在しないため、DOMに変更を加えることができないため、checkLoginに変更を加える必要があります。このフィドルでは、呼び出しの非同期性を考慮してどのように行うかについてのヒントを示す、簡単で汚い例を見ることができます。

于 2012-11-28T13:45:20.880 に答える