javascript - 使用存储的凭据自动登录 PhoneGap Onsen UI 应用程序

Question

我有这个移动应用程序是用 PhoneGap、Onsen UI 和 AngularJS 制作的。

我有一个 index.html 文件，其中我有以下页面结构:

index.html
     - <ons-navigator var="myNavigator" page="login.html">

     - <ons-template id="login.html">
            - <ons-page ng-controller="LoginController" id="login">
     - <ons-template id="main.html">
            - <ons-page ng-controller="AppController" id="main">
                  - <ons-tabbar>
                     - <ons-tab active="true" page="upcoming.html">
                     - <ons-tab active="true" page="completed.html">
                     - <ons-tab active="true" page="settings.html">
     - <ons-template id="upcoming.html">
     - <ons-template id="completed.html">
     - <ons-template id="settings.html">

login.html 页面要求用户凭据，当用户单击“登录”时，这些凭据将存储在 window.localStorage 对象中。

下次我加载页面时，我希望应用程序不导航到 login.html 页面(不显示它)，而是检查 localStorage 中的凭据，并使用 myNavigator推送到 main.html 页面，就像成功登录一样。

我有一个包含两个 Controller 的 main.js 文件，在 Controller 定义之外，我有一个 ons.ready 函数，它在加载 Onsen 框架时触发。

ons.ready(function() {
    var storage = window.localStorage;
    if(credentials_found_in_localStorage)
        myNavigator.pushPage('main.html');
    }
});

此功能正常工作，但在 pushPage 发生之前，login.html 页面会显示几秒钟(直到我返回是否登录成功)

如何使用存储的凭据并跳过 login.html 页面实现功能性自动登录？

处理此问题的最佳方法是什么？ (也许是启动画面？)

Answer 1

您可以在没有指定页面的情况下启动您的导航器(删除 page="login.html" 属性)，然后在 ons.ready() 上加载您想要的页面>:

ons.ready(function() {
  if(credentials_found_in_localStorage) {
    nav.resetToPage('main.html');
  } else {
    nav.resetToPage('login.html');
  }
});

在这里工作(更改 isLogged 的值):http://codepen.io/frankdiox/pen/eNmNoz

另一种可能的解决方案是删除您的 ons-navigator，因为我认为您只将它用于日志记录目的，并使用 ons-modal反而。为此，您必须使 ons-tabbar 成为主要元素(删除 ons-template id="main.html" 包装器)。在模式中，您可以包含实际的 login.html 页面，并且仅在用户未准备就绪时在 ons.ready 上执行 myModal.show()已登录。当他登录时，您只需执行 myModal.hide()。如果您不想在用户登录之前加载标签栏中的第一页，只需使用 myTabbar.loadPage(...)登录检查后。

希望对您有所帮助!