What is the best way to store a global visible user in an Angular 2 application?

Question

What is the best way to store a global visible user in an Angular 2 application?

Upon logging in, I am able to retrieve the user.

  private login() {
    let data = { "UserName": "admin" , "Password": "+" };

    this.apiService.doLogin(data).subscribe(
      (res) => this.userService.set('user', res),
      (err) => console.log(err)
    )
  }

How can I effectively implement this userService? * Is there a way to fetch user data without making a new call to the back end? ** I am aware of https://github.com/ngrx/store, but perhaps there is a better solution out there?

angularjs angular typescript rxjs ngrx

Answer 1

Answer №1

If you're looking to store the details of your logged-in user, there are a few options available to you.

Using Redux Store (ngrx):

You can utilize the ngrx store concept by visiting https://github.com/ngrx/store. Simply retrieve your user model from the backend and dispatch an action to load the data.

Advantages:

You can subscribe to your user store in various parts of the application, enabling you to react effectively to any changes,
The user model in the store remains immutable - any modifications require triggering an action that triggers a pure reducer function, preventing accidental alterations to user data.

Using a Service:

An alternative approach is to store your user model object as a private variable within a service.

Disadvantages:

In Angular 2, services can be either global or module-scoped. This means that if you mistakenly include your user service in both the global module providers array and as a feature module provider, Angular 2 will create two instances of your service, potentially leading to issues such as having one instance with empty user data. A similar problem is discussed here: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#q-why-it-is-bad

Answer 2

If you're looking to store the details of your logged-in user, there are a few options available to you.

Using Redux Store (ngrx):

You can utilize the ngrx store concept by visiting https://github.com/ngrx/store. Simply retrieve your user model from the backend and dispatch an action to load the data.

Advantages:

You can subscribe to your user store in various parts of the application, enabling you to react effectively to any changes,
The user model in the store remains immutable - any modifications require triggering an action that triggers a pure reducer function, preventing accidental alterations to user data.

Using a Service:

An alternative approach is to store your user model object as a private variable within a service.

Disadvantages:

In Angular 2, services can be either global or module-scoped. This means that if you mistakenly include your user service in both the global module providers array and as a feature module provider, Angular 2 will create two instances of your service, potentially leading to issues such as having one instance with empty user data. A similar problem is discussed here: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#q-why-it-is-bad

Answer 3

Answer №2

Utilizing HTML5's local storage capabilities is a possibility, however when working with Angular2, ngrx/store presents a more robust solution. It includes advanced state management features making it the preferred choice for handling data within an Angular application.

Answer 4

Utilizing HTML5's local storage capabilities is a possibility, however when working with Angular2, ngrx/store presents a more robust solution. It includes advanced state management features making it the preferred choice for handling data within an Angular application.

What is the best way to store a global visible user in an Angular 2 application?

Answer №1

Answer №2

Similar questions

Checking the types of arrays does not function properly within nested objects

Iterating over elements with a custom width using ngFor in Bootstrap

"Enhance your Angular configuration with the powerful ngBootbox plugin

Validation of decimal numbers in JavaScript without the presence of any other characters

NextJS and Context API throwing a Typescript error

Transmit data using $http post request in Angular to assign values to a key in a PHP array

Fetching data from a URL using AngularJS while the view is being loaded

Combining Typescript interfaces to enhance the specificity of a property within an external library's interface

The existing object contains a value, however, attempting to access its property results in an undefined value being

Check the present value of Subject.asObservable() within an Angular service

Question from a student: What is the best way to transfer information between different classes?

What could be the reason for the click event returning undefined?

Issue with vue-class-component: encountering TS2339 error when trying to call a method within

Combining input with a space character

Verifying the existence of an optional property on my component using Jest

Customizing the login page of Thinktecture Identity Server v3 to include a loader feature

Failure to trigger VS code extension functionality

Using a number input with step increments of 0.01 in AngularJS can result in undefined values for specific inputs

Command to exclude the processing of an element during compilation

Issues with Meteor-Angular 1.5 service functionality