Angular 角度-除本地存储外,在何处存储永久用户信息

Angular 角度-除本地存储外,在何处存储永久用户信息,angular,security,jwt,Angular,Security,Jwt,I通过JWT进行身份验证的系统,在本地存储器上,JWT设置在一个变量上,用户角色设置在本地存储器上的另一个变量上。但是,所有信息(包括JWT)都是通过CryptoJS加密的,然后在侧栏上,例如,我们有NGIF,用于仅为具有特定角色的用户显示一些菜单。所有这些NGIF都调用一个方法,该方法解密本地存储上的数据以获取用户角色,然后进行验证。问题是,在多个图标/侧边栏图标等中进行的所有解密都开始使系统变得非常缓慢。 那么,在这种情况下,有人知道在哪里保存用户数据吗?:) 您可以使用: :可以从任何组件

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

您可以使用:

:可以从任何组件访问的共享服务(在根模块中声明),请确保首先解密信息并将其存储在服务内的变量中

:类似Redux的功能,您可以在其中存储解密的用户信息,并从任何地方访问它。

您可以使用:

:可以从任何组件访问的共享服务(在根模块中声明),请确保首先解密信息并将其存储在服务内的变量中


:类似Redux的东西,您可以在其中存储解密的用户信息,并从任何地方访问它。

我使用的一般规则是在
*ngIf
之类的东西上使用函数,它们在每个摘要周期都会被处理。这就是你的表现受到冲击的原因。尝试将
console.log()
放入decrypt函数,查看每秒调用该函数的次数

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

服务.ts

decryptedValue = null;

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

ngOnInit() {
    this.temp = this.service.getDecryptedValue();
}
组件。ts

decryptedValue = null;

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

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

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

我使用的一般规则是在
*ngIf
之类的东西上使用函数,它们在每个摘要周期都会被处理。这就是你的表现受到冲击的原因。尝试将
console.log()
放入decrypt函数,查看每秒调用该函数的次数

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

服务.ts

decryptedValue = null;

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

ngOnInit() {
    this.temp = this.service.getDecryptedValue();
}
组件。ts

decryptedValue = null;

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

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

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

否,但如果您不想在刷新时丢失数据,您可以仅在应用程序启动时刷新时将数据从本地存储加载到您的服务。是的,我尝试过,在用户服务构造函数上,我检查令牌的本地存储,然后在用户服务中存储信息。我今天在做的时候被打断了,但我会稍后再做,我会回来告诉你它是否有效,无论如何,谢谢manCool,如果有什么不起作用,请确保在问题中添加代码。是的,非常有效。我唯一需要担心的是让root提供的服务正确吗?在这种情况下,用户服务在app.module中声明,因此当我刷新页面时,它将始终刷新变量。是否正确?此外,providedIn:“root”修饰符在这种情况下也可以工作?是的,每次刷新页面时都会重新创建服务,但只有在刷新时才会执行解密,而且是的,providedIn是“root”服务,它意味着单例服务,这就是您需要的,组件之间只共享一个wich实例。否,但是,如果您不想在刷新时丢失数据,您可以仅在应用程序启动时刷新时将数据从本地存储加载到服务中。是的,我尝试过,在用户服务构造函数上,我正在检查本地存储中的令牌,然后在用户服务中存储信息。我今天在做的时候被打断了,但我会稍后再做,我会回来告诉你它是否有效,无论如何,谢谢manCool,如果有什么不起作用,请确保在问题中添加代码。是的,非常有效。我唯一需要担心的是让root提供的服务正确吗?在这种情况下,用户服务在app.module中声明,因此当我刷新页面时,它将始终刷新变量。是否正确?另外,在这种情况下,providedIn:'root'装饰程序也可以工作?是的,每次刷新页面时都会重新创建服务,但只有在刷新时才会执行解密,是的,providedIn是'root'服务,它意味着单例服务,这就是您需要的,组件之间只共享一个wich实例。为什么不首先将解密后的数据存储在本地存储器中?为什么不首先将解密后的数据存储在本地存储器中?