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中看到一個快速而骯髒的示例，並提供了關於如何考慮您的調用的異步性質的提示。