1

我正在开发一个仅对登录用户可用的 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')：

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

4

1 回答 1

0

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

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

您将不得不对 checkLogin 进行更改，特别是因为该页面尚不存在，因此您无法对 DOM 进行更改。您可以在这个 fiddle中看到一个快速而肮脏的示例，提示您如何考虑调用的异步性质。

于 2012-11-28T13:45:20.880 回答