jQuery Mobile的安全页面

Question

我正在开发一个jQuery Mobile的网站，是只提供给已登录的用户

我有一个检查一个服务器功能的登录状态：

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中看到一个快速而肮脏的示例，并提供了关于如何考虑您的调用的异步性质的提示。