离子 - 可在多个页面中工作的注销功能

Question

我想创建一个基本清理logout()的函数LocalStorage，然后重定向到我的LoginPage

logout() {
    localStorage.removeItem(authenticated_user_key_name); // "authenticated_user"

    this.navCtrl.push(LoginPage);
}

但我想在多个页面中调用此功能，HomePage，HomeUserPage，ChatPage

我知道我可以将此功能放在我的app.modules.ts中，但我想要分发这些功能，login()，logout()，refreshToken()等......

我还没有很好地理解离子结构，所以我应该创造什么？

• 另一页
• 管
• 组件
• 指令
• 提供商

我已尝试使用提供商AuthProvider，但我发现我无法在提供商中导入navController，因此，当我{我无法重定向到我的login页面时{1}}

我应该把这些全局函数放在哪里？

Answer 1

为了保持结构和清洁，我建议您评估您对应该提供的方法/功能的需求＆＃34;跨越许多页面/组件并创建一个新的 foundation.provider.ts ，它可以：

• auth（就像你的情况一样）
• 分析（如MixPanel或Google Analytics等）
• 等

所以你需要：

1. 为您的项目添加新的提供程序（在您的providers文件夹中创建foundation.provider.ts）
2. 将其导入app.module.ts（导入和导入Ngmodule中的提供程序部分）
3. 然后根据需要将其导入您的页面/组件

更新： 因为这个问题还包括将页面推送到navstack的能力 - 这通常不适用于提供者（NavController需要一个组件）。

要解决这个问题，有几个策略：

1. 利用侧边菜单和放置按钮（Logout）使其在整个应用程序中可用，而不管页面如何。通过这种方式，您可以将用户引导到侧边栏以注销应用程序，并且可以在所有应用程序页面上使用侧边菜单：



这将需要app.component

中的按钮
＆＃13;
＆＃13;
<button ion-button block clear menuClose (click)="logout()">LOGOUT</button>
＆＃13;
＆＃13;
＆＃13;

和app.component.ts中的代码：

logout() {
    // cleans out data and sets login page as root:
    this.foundation.logout();
    // does navigate user
    this.nav.setRoot('LoginPage');
}

1. 如果你仍然需要在应用程序内的多个页面上放置一个注销按钮（不是很好的UX btw）。然后你可以做拆分逻辑方法：在按下注销按钮的页面内你打电话：
＆＃13;
＆＃13;
    <button ion-button outline (click)="this.foundation.logout(); this.nav.setRoot('loginPage')">
          Logout
    </button>
＆＃13;
＆＃13;
＆＃13;

希望这很清楚。

有第三个选项是hacky - 将App导入您的基础并调用getActiveNavs（）方法。但我不建议这样做。