jQuery移动安全页面

Question

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

编辑:如果有人想知道如何更好地实现这一点，应用程序中的每个页面都需要用户登录.。

Answer 1

为了在每次加载新页面时运行该函数，您将需要将其绑定到pagebeforeload事件，如果用户导航不验证登录，则可能会取消用户导航。

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

您必须对checkLogin进行更改，特别是因为页面还不存在，所以不能对DOM进行更改。您可以在这把小提琴中看到一个快速而肮脏的示例，给出如何考虑调用的异步特性的提示。