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进行更改。您可以在this fiddle中看到一个快速而肮脏的示例，提供有关如何考虑呼叫的异步性质的提示。

jQuery移动安全页面

1 个答案: