Angular - 存储永久用户信息的位置（本地存储除外）

Posted 2023-03-10

【中文标题】Angular - 存储永久用户信息的位置（本地存储除外）

【英文标题】：Angular - Where to store permanent user information except on local storage

【发布时间】：2020-03-20 18:39:21

【问题描述】：

我是一个通过 JWT 进行身份验证的系统，在本地存储上，JWT 设置在一个变量上，用户角色设置在本地存储上的另一个变量中。但是，所有信息（包括 JWT）都是通过 CryptoJS 加密的，然后在侧栏上，例如，我们有 ngIfs 用于仅针对具有某些角色的用户显示一些菜单。所有这些 ngIf 调用一个方法来解密本地存储上的数据以获取用户角色，然后进行验证。问题是多个图标/侧边栏图标/等中的所有这些解密都开始使系统变得非常慢。 那么在这种情况下，有人知道在哪里保存用户数据吗？ :)

【问题讨论】：

一开始为什么不把解密后的数据存到本地存储呢？

【参考方案1】：

您可以使用：

Service：可以从任何组件访问的共享服务（在根模块中声明），请确保首先解密信息并将其存储在服务内部的变量中.

Store：像 Redux 之类的东西，您可以在其中存储解密的用户信息，并从任何地方访问它。

【讨论】：

否，但如果您希望在刷新时不丢失数据，您可以仅在应用程序启动时刷新时将数据从本地存储加载到您的服务。

是的，我试过了，在用户服务构造函数上，我正在检查令牌的本地存储，然后将信息存储在用户服务中。我今天做的时候被打断了，但我稍后再做，我会回来告诉它是否有效，无论如何谢谢男人

酷，如果有问题，请确保将代码添加到问题中。

是的，工作就像一个魅力。我唯一需要担心的是在 root 中提供服务吗？在这种情况下，用户服务是在 app.module 中声明的，所以当我刷新页面时它总是会刷新变量对吗？在这种情况下，providedIn: 'root' 装饰器也可以工作吗？

是的，每次刷新页面时都会重新创建服务，但只有在刷新时才会执行解密，是的，提供的服务是“root”，这意味着单例服务，这就是你需要，只有一个你的 wich 实例在组件之间共享。

【参考方案2】：

我使用的一般规则是永远在*ngIf 之类的东西上使用函数，在每个摘要周期都会处理它们。这就是为什么你的表现受到打击的原因。尝试在解密函数中放入console.log()，看看每秒调用了多少次。

您可以将加密的值存储在本地存储中，然后使用服务将解密的值存储在内存中。然后调用服务来获取解密后的值。然后，如果用户刷新页面，他们必须再次解密一次，然后传递解密的值。这是我所说的一个例子。

service.ts

decryptedValue = null;

getDecryptedValue() 
    if (!decryptedValue) 
        this.decryptedValue = this.decrypt(localStorage.getItem('encryptedValueKey'));
    
    return this.decryptedValue;

component.ts

temp = null;

ngOnInit() 
    this.temp = this.service.getDecryptedValue();

然后你可以从你想要的任何组件调用服务，与你现在做的相比它应该相当快