将客户端数据存储在 Angular 中的位置，稍后在 REST-API 中用于获取信息

Posted 2023-03-10

【中文标题】将客户端数据存储在 Angular 中的位置，稍后在 REST-API 中用于获取信息

【英文标题】：Where to store client data in angular which is later used in REST-API for getting information

【发布时间】：2019-10-17 15:25:35

【问题描述】：

我有一个角度应用程序，每当用户登录时，我都会通过 REST-API 请求从服务器获取他的所有数据以及 jsonwebtoken 并将其存储在本地存储中。

之后，我在其他 REST-API 调用中使用相同的用户数据（例如 email, account_status, id 等）来获取更多信息。这显然不是正确的做法，用户可以修改自己的localstorage数据，轻松获取其他用户的信息。

我正在使用jsonwebtoken 进行身份验证，通过REST-API 调用验证authgaurd service 中的令牌。

任何人都可以建议正确的方法来存储带有简短描述的信息。 我可以使用 Cookie 来解决这个问题吗？

【问题讨论】：

Angular2 retain sensitive information after browser refresh的可能重复

您基本上是在尝试实现 JWT 会话。使用它们的唯一真正原因是如果您需要支持非 Web 应用程序，或者使用多个后端服务器。请阅读：stop-using-jwt-for-sessions 遗憾的是，任何其他情况，从长远来看，您最好使用基于 cookie 的普通会话。

【参考方案1】：

创建一个shared service并导入app module，在所有组件中使用，

import  Injectable  from '@angular/core';
import Subject from 'rxjs/Subject';
import Observable from 'rxjs/Observable';
import  MyWrapper  from '../models/models';

@Injectable()
export class SharedService

  data:any=;

  setData(key,value) 
     this.data[key]=value;
  

  clearData() 
     this.data=;
  

  getData(key) 
    return this.data[key];
  

注意：这与本地存储不完全一样，一旦浏览器关闭或页面刷新类型的会话存储，您将丢失数据，但您仍然可以跨组件放置和获取数据。

要设置数据，

 sharedService.setData("mydata","mydata");

要获取数据，

 sharedService.getData("mydata");

如果您希望数据是持久的，那么您可以将数据存储在服务器中并在ngOnInit 中获取数据，或者在存储数据时使用某种加密（jsencrypt 或cryptojs）在本地存储中，因此用户无法对其进行修改。但它仍然不是一个防弹解决方案。如果您要存储一些敏感数据，我建议您将其存储在服务器中。

【讨论】：

但是存储的数据不会使用服务持久化，会在用户关闭浏览器时被清除。

是的，一种会话存储。否则，您需要将其存储在服务器端并获取数据 ngoninit。或者您可以使用一些加密来防止用户更改本地存储中的数据。

这个方法看起来不错，但是你能推荐一下这个问题常用的方法吗？

哪种方法？ @RakeshSenwar

然后您将把加密的密钥保存在哪里？在存储也对吗？并且由于它的 javascript，可以很容易地回溯，并且您的数据安全

【参考方案2】：

如果您的应用程序逻辑很复杂，您可以考虑采用某种形式的状态管理，基于 Flux 架构。最常见和完善的状态管理解决方案是NgRx Store，它与 Redux 非常相似，如果您使用过 React.js，可能会很熟悉。

【讨论】：

但是使用ngrx存储存储的数据不会持久化，当用户关闭浏览器时它会被清除。你能详细说明一下吗

@RakeshSenwar 我不知道您需要在关闭浏览器时保留数据。在这种情况下，我会推荐 localStorage ..