Angular/Ionic Singleton 在刷新后被销毁

Question

我有一个单独的 typescript 类，用于存储用户的登录凭据。我将它们设置在登录页面上，然后使用我的 Angular Router.navigate 转到下一页。 （没有参数），在下一页我想使用我的单例，它工作得很好，但是如果我刷新页面，单例是未定义的？ 我该如何解决这个问题？

这是刷新后的错误：

• core.js:5980 ERROR 错误：未捕获（承诺中）：TypeError：不能 读取未定义类型错误的属性“socialSecurityNumber”：不能 读取未定义的属性“socialSecurityNumber”

谢谢

Answer 1

如果您刷新页面（在浏览器中按 F5），整个 SPA 将再次启动并再次创建服务。

这意味着服务的新实例将没有用户数据，除非存储在存储或 cookie 中。

还要检查服务是在“根目录”中提供的，而不是在任何模块提供程序数组中提供的，因此没有它的副本。

Answer 2

在大多数情况下，我们会将用户登录详细信息存储在浏览器存储或 cookie 中。

当您实际上要将它们保存在服务类中时，尝试使用浏览器存储来存储用户相关的详细信息。

查看此处了解浏览器存储以及如何设置它们。

• Implement-browser-storage-in-an-angular-application

在上述实现之后，尝试在应用组件加载时检查用户凭据，发现如果不重定向到登录页面，则正常流程。

P.S：您需要进行一些设计更改才能实现，就像您真的希望用户继续当前会话或需要他重定向登录页面以进行新会话一样。