1

我有一个使用 phonegap 开发的网络应用程序，其中索引页面是登录页面/注册页面。

这很好，因为这是新用户在未注册使用该应用程序时应该看到的第一页。然而，这给我带来了 2 个问题，即当用户登录并点击后退按钮时，它会返回登录页面，我不希望这种情况发生。此外，当存储用户凭据并打开应用程序时，它仍然会进入登录页面片刻，然后进入应用程序。

我怎样才能阻止这种情况发生？我是否必须实现 cookie/会话类型的登录系统？

我的代码如下

HTML 

<div id="home">

    <div id="launcherPage" data-role="page">
        <!-- I'm just here waiting for deviceReady -->
    </div>


    <div id="loginPage" data-role="page">

        <div data-role="header">
            <h1>CHUNE</h1>
        </div>

        <div data-role="content">    

            <form id="loginForm">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" value="" placeholder="Username" />
            </div>

            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" placeholder="Password" />
            </div>

            <input type="submit" value="Login" id="submitButton">
            </form>
            <div style="text-align: center;">Or</div> <!--need to center-->
            <a href="./register.html" data-role="button">Register</a>

        </div>

        <div data-role="footer">
            <h4>&copy; KewsPlus</h4>
        </div>

    </div>
</div>

JavaScript

 function init() {
document.addEventListener("deviceready", deviceReady, true);
delete init;

}

 function checkPreAuth() {
console.log("checkPreAuth");
var form = $("#loginForm");
if(window.localStorage["username"] != undefined && window.localStorage["password"] != undefined) {
    $("#username", form).val(window.localStorage["username"]);
    $("#password", form).val(window.localStorage["password"]);
    handleLogin();
}
}

function handleLogin() {
var url = 'http://kewsplus.com/includes/login.php';
var form = $("#loginForm");    
//disable the button so we can't resubmit while we wait
$("#submitButton",form).attr("disabled","disabled");
var u = $("#username", form).val();
var p = $("#password", form).val();
if(u != '' && p!= '') {
    $.ajax({
        type: "POST",
        url: url,
        data: {username:u,password:p},
        dataType: "jsonp",
        crossDomain: "true",
        jsonp : "onJSONPLoad",
        success: function (data) {
            if (data = 1) {
                //store
                window.localStorage["username"] = u;
                window.localStorage["password"] = p;             
                $.mobile.changePage("featuredtracks.html");
            }  else {
                navigator.notification.alert("Your login failed", function() {});
            }
        }
    }); //$.ajax
       $("#submitButton").removeAttr("disabled");
    }
 else {
    navigator.notification.alert("You must enter a username and password", function() {});
    $("#submitButton").removeAttr("disabled");
}
return false;
}

function deviceReady() {
console.log("deviceReady");
$("#loginPage").on("pageinit",function() {
    console.log("pageinit run");
    $("#loginForm").on("submit",handleLogin);
    checkPreAuth();
});
$.mobile.changePage("#loginPage");
    });
4

2 回答 2

1

  1. 为了防止后退功能，一旦您加载新页面 (featuredtracks.html)，您将需要通过附加到 PhoneGap 提供的事件“后退按钮”来覆盖后退按钮。来自PhoneGap API：

    document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
}

  2. 为了防止登录页面在保存凭据时显示一秒钟，请考虑将您的第一页设置为启动屏幕。该页面将决定是否加载登录页面或主页（我假设为 featuretrack.html）。因此，不要总是先加载登录页面，而是加载一个不同的页面，该页面将显示一些图像或其他内容，它决定是加载 login.html 还是 featurestracks.html。

    请注意，现在您还需要覆盖登录页面的后退按钮，以便用户无法回击并转到加载/启动屏幕页面。

于 2013-04-18T14:37:17.353 回答
0 
            function deviceReady() {
            document.addEventListener("backbutton", function(e){
            if($.mobile.activePage.is("#yourPageName")){
            navigator.notification.confirm('Do you want to exit the application?',confirmCallback, 'YourTitle');
               } 
            }, false);

}

          function confirmCallback(buttonIndex) {
           if(buttonIndex == 1) {
           navigator.app.exitApp();
            return true;
                 }
              else {
                return false;
                    }
         }

试试上面的代码。它对我有用。

于 2014-07-30T12:32:02.237 回答