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

Posted 2023-03-07

【中文标题】使用存储的凭据自动登录 PhoneGap Onsen UI 应用程序

【英文标题】：Login automatically with stored credentials PhoneGap Onsen UI app

【发布时间】：2015-08-27 14:59:42

【问题描述】：

我有这个使用 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 页面，就像成功登录一样。

我有一个 main.js 文件，其中包含两个控制器，在控制器定义之外，我有一个 ons.ready 函数，该函数在加载 Onsen 框架时触发。

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

此功能正在运行，但在 pushPage 发生之前，login.html 页面会显示几秒钟（直到我返回登录是否成功）

我怎样才能有一个功能性的自动登录，它使用存储的凭据并跳过 login.html 页面？

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

【参考方案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(...)。

希望对你有帮助！

【讨论】：

谢谢！我采用了第一种方法。效果很好。我希望我可以提高应用程序的整体性能，但它在浏览器中的运行速度有点慢。 “本机”（已发布）应用程序会运行得更快吗？ （抱歉这个愚蠢的问题，我使用 PhoneGap 和 Onsen UI 还不到一周）