返回按钮返回到登录页面

Question

我有一个web应用程序，我正在开发与phonegap其中索引页面是登录页面/注册页面。

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

我该如何阻止这种情况发生？我是否必须实施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"); 
    }); 

Answer 1

1. 为了防止返回功能，只要加载新页面（featuredtracks.html），您就需要通过附加到PhoneGap提供的事件'backbutton'来覆盖后退按钮。从PhoneGap API：

   document.addEventListener("backbutton", onBackKeyDown, false); 
   
   function onBackKeyDown() { 
       // Handle the back button 
   } 
   

2. 为了防止登录页面出现时，凭据保存第二，考虑对你的第一页就像一个闪屏。该页面将决定是否加载登录页面或主页面（featuredtrack.html我假设）。因此，不要总是首先加载您的登录页面，而是加载不同的页面，以显示一些图片或其他内容，从而决定是否加载login.html或featuredtracks.html。

   请注意，现在您还需要重写登录页面的后退按钮，以便用户无法回到并加载/启动画面页面。

Answer 2

  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; 
        } 
     } 

试试上面的code.it的工作对我来说。