Jquery mobile jQuery移动安全页面

我正在开发一个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');
                }
            });
    });
}

函数checkLogin（）{
$（函数（）{
$.getJSON（root_url+'manageUsers/checklogin/？callback=？'，null，
功能（数据）{
如果（data.logged==“false”）{
$（“#index_Container”）.html（“需要登录我们注意到您尚未登录，请登录使用此应用。
”）.trigger（'create'）；
$.mobile.changePage（'login.html'）；
}否则{
$（“.logged_in”）.text（data.username）；
$（“.logged_in”）.addClass（'logout'）；
$（“.header_div”）.trigger（'create'）；
}
});
});
}

我似乎不知道如何实现这一点，所以每次加载索引页面和任何其他页面时，在呈现页面上的任何其他内容之前，都会触发此操作。当前，页面将加载并显示HTML，然后执行$.mobile.changePage（'login.HTML'）：

---

编辑：如果有人对如何更好地实现这一点有任何想法，我想知道，应用程序中的每个页面都要求用户登录。

为了让此功能在每次加载新页面时运行，您需要将其绑定到

加载前页面事件，如果不验证登录，则可能会取消用户导航

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

您必须对checkLogin进行更改，特别是因为该页面尚不存在，因此无法对DOM进行更改。您可以在中看到一个快速而肮脏的示例，根据呼叫的异步性质给出了如何操作的提示。
我是否可以只加载登录页面而不插入文本？-这也适用于初始的“index.html”页面吗？我遇到的问题是，如果我在$.getJSON调用中调用event.preventDefault（），该页面仍会呈现然后转发。。不知道如何解决。您回答了问题，但仍然坚持json调用。谢谢