在Angular 2/4/6应用程序中管理状态的最佳实践

Question

我对Angular不太熟悉，但是一项项目已经交给了我，所以我开始着手处理。然而，我遇到了与状态管理相关的问题。在通过WCF Restful服务进行身份验证后，会向用户提供一个Token。所以我可以用以下三种方法来处理：

- Session-storage - Cookies - Local storage 以上方法存在的问题是：

- 如果我使用会话状态，则在浏览器中打开新标签时它将无效，因此无法检查Token是否存在。 - 如果我使用本地存储，则如果用户关闭浏览器并远离他/她的系统，然后稍后有人打开他的浏览器，这显然会构成安全威胁。 - 如果我使用Cookies，那么它在现在也可以正常工作，直到我遇到了一个奇怪的问题：我的子组件通过使用canActivateChild函数通过authguard进行了身份验证。但是，当我在新标签中粘贴了URL（包括子组件路径）时，两个页面都是相同的。当我从第二个标签中单击“退出”按钮时，它没有删除Cookies。

注意：每次单击“退出”按钮时都会调用函数，但它在第二个选项卡中不起作用，在第一个选项卡中工作正常。

- Ashish Kumar

---

你是如何准确地删除cookie的？ - SiddAjmera

注销() { this.cookieService.deleteAll(); this.router.navigate(['/sign-in']); } - Ashish Kumar

在这种情况下，看起来是ngx-cookie-service出了问题。 - SiddAjmera

这种类型的问题不适合在SO上提问，因为它是主观的，并涉及大量的细节和考虑。我建议你在Reddit上提问，那里你会有更好的机会得到答案。 - Max Koretskyi

Answer 1

如果你在使用Angular，最好的方法是使用Ngrx。以前我们使用的是Redux，现在我们也有了Ngrx。你还可以使用Ngrx设备工具作为Chrome扩展程序，在应用程序加载时查看状态和操作。这太棒了。

- Kumar Gaurav

---

谢谢@Kumar-Gaurav，我会尝试这个方法，但是请问如果我刷新页面或在多个URL中打开相同的页面，它不会丢失状态吗？ - Ashish Kumar

状态是在应用程序生命周期中保持值的东西，例如：您调用一个API进行订阅，然后使用effect类分派操作，以便它将数据更新到存储中，因此当您刷新页面时，它不会丢失数据。您可以在下载Redux crime设备工具扩展后看到这一点。当您需要该数据时，请使用Store.select，它将返回可观察对象，因此请订阅并使用它。 - Kumar Gaurav

你可以使用不同的ActionType来执行多个Api并将所有数据分发到存储中。 - Kumar Gaurav

你用了哪个东西？ - Kumar Gaurav

Ngrx，但是我找不到一种方法来立即注销用户，如果浏览器意外关闭，因为TokenId保存在本地存储中，如果刷新页面，您将无法获取它。 - Ashish Kumar

刷新页面将清除浏览器中的存储，因此需要考虑一些解决方法。 - Kumar Gaurav