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

Posted 2023-02-22

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

【英文标题】：Best practice to manage state in Angular 2/4/6 application

【发布时间】：2019-02-03 22:06:17

【问题描述】：

我是 Angular 的新手，但一个项目已分配给我，所以我已经开始工作，但我面临与状态管理相关的情况，因此在通过 wcf Restful 服务进行身份验证后，会向用户提供令牌。所以我可以用这 3 种方法来处理这个问题。

会话存储

Cookie

本地存储

上述方法的问题是 --

如果我使用 会话状态，它将对浏览器中的新标签无效，因此我无法检查令牌是否存在

如果我使用本地存储，如果用户关闭浏览器并离开他/她的系统，然后其他人打开他/她的浏览器，那么它将无法正常工作，那么这显然是一个安全威胁。

如果我使用 cookies 到目前为止它工作正常，直到我遇到一个奇怪的问题，我的子组件正在通过 authguard 使用 canActivateChild 功能。 但是当我粘贴网址（连同子组件路径）在新标签页中然后两个标签页中的两个页面都相同，并且当我单击注销按钮时从第二个标签它没有删除cookies。

注意： 每次我单击注销按钮时都会调用该函数，但它在第二个选项卡中不起作用，从第一个选项卡开始它工作正常。

【问题讨论】：

您是如何删除 cookie 的？

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

在这种情况下，ngx-cookie-service 似乎存在问题。

这类问题不适合SO，因为它是主观的，涉及很多细节和考虑，我建议你在Reddit上问，你会有更好的机会在那里得到答案

【参考方案1】：

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

【讨论】：

谢谢@Kumar-Gaurav，我会试试这个，但你能告诉我，如果我刷新页面或在多个 url 打开同一个页面，它不会丢失状态吗？

状态是在你的应用程序生命周期之前保持值的东西，例如：你调用一个 Api 订阅它，然后使用效果类调度操作，这样它就会用数据更新存储，所以当你刷新页面不会丢失数据，下载 Redux 犯罪设备工具扩展后可以看到，当你需要该数据时做 Store.select ，所以它会返回你的 observables obj 所以订阅和使用它

您可以使用 difft ActionType 执行多个 Api 并调度存储中的所有数据..

你用过什么东西？？

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