Angular 2 - Whats the best way to store global variables like authentication token so all classes have access to them?

Question

Angular 2 question only:

Whats the best way to store global variables like authentication token or base url (environment settings) so that all classes can have acces

Answer 1

you can also use ngrx/store, for global data(except jwt token) and pass it to 'connected' components in redux way

Answer 2

In my opinion storing a parameter like this on global variable like $rootScope is considered a bad practice. On Angular 1.x you should use a service (singelton) in order to fetch this data from everywhere. This way your data will be available from everywhere - you can inject your service and get the value. You could also mock/spy this service when unit testing.

Angular 2 applications should be built as a component tree. I guess that the best solution for your scenario will be to save it using a service under the root component and pass it to child components as an input.

This way your data will be controlled from your main component. It will be immutable (child components cannot change it) and your components will not have external references (it is an important step towards a good component architecture).

If you still want to do it the "Angular 1.x way", I guess that you could inject this service everywhere and use its values. It is less preferred options but it is better than global variables!

Hope that was helpful.

Answer 3

In your specific scenario you would actually want to store token in localstorage since a page refresh will cause you to loose token value stored in memory.

Answer 4

Well to create really global scope data you should register your class\object\value during the app bootstrapping as dependency parameter to the bootstrap function

bootstrap(MyApp,[MyGlobalService]);

This will register your service MyGlobalService (infact it can be a object or factory function or your own provider) at the root level. This dependency now can be injected into any component.

Unlike Angular1 there are multiple Injectors available for an Angular2 app, with one-to-one mapping between components and injectors. Each component has its own injector.

The Angular developer guide has some good example of such registrations. See the guide on Dependency Injection.

The other option has already been highlighted by @Yaniv.