Angular 2 - 什么是存储全局变量(如身份验证令牌)的最佳方式,以便所有类都可以访问它们?

时间:2015-11-08 19:37:03

标签: angular typescript

仅限Angular 2问题:

存储全局变量(如身份验证令牌或基本网址(环境设置))的最佳方法是什么,以便所有类都可以访问它们而不会在刷新时丢失它们?

所以当我登录时,我会给用户一个身份验证令牌,通常将它存储在$ rootscope中,用于角度1.x.

4 个答案:

答案 0 :(得分:14)

要创建真正的全局范围数据,您应该在app bootstrapping期间将class \ object \ value注册为bootstrap函数的依赖参数

bootstrap(MyApp,[MyGlobalService]);

这将在根级别注册您的服务MyGlobalService(实际上它可以是对象或工厂函数或您自己的提供者)。现在可以将此依赖项注入任何组件。

与Angular1不同,Angular2应用程序有多个Injectors,组件和注入器之间有一对一的映射。每个组件都有自己的注射器。

Angular开发人员指南有一些很好的注册示例。请参阅Dependency Injection上的指南。

@Yaniv已经强调了另一个选项。

答案 1 :(得分:5)

在我看来,像$ rootScope这样在全局变量上存储这样的参数被认为是一种不好的做法。在Angular 1.x上,你应该使用服务(singelton)来从任何地方获取这些数据。这样您的数据就可以从任何地方获得 - 您可以注入您的服务并获得价值。您还可以在单​​元测试时模拟/侦察此服务。

Angular 2应用程序应构建为component tree。我想你的方案的最佳解决方案是使用根组件下的服务保存它,并将其作为输入传递给子组件。

这样您的数据将从主要组件进行控制。它将是不可变的(子组件不能更改它),并且您的组件将没有外部引用(这是迈向良好组件架构的重要一步)。

如果您仍然希望以“Angular 1.x方式”执行此操作,我想您可以在任何地方注入此服务并使用其值。它不太受欢迎,但它比全局变量更好!

希望这很有用。

答案 2 :(得分:2)

在您的特定场景中,您实际上希望将令牌存储在localstorage中,因为页面刷新会导致您丢失存储在内存中的令牌值。

答案 3 :(得分:0)

您还可以使用ngrx/store获取全局数据(jwt令牌除外)并以redux方式将其传递给“已连接”组件