Angular 2/4 - Saving User Object Information in the Front-End Instead of Repeatedly Contacting the Back-End Server

Question

Angular 2/4 - Saving User Object Information in the Front-End Instead of Repeatedly Contacting the Back-End Server

Is there a more efficient way to store and update the current user details in the frontend, without constantly making new HTTP GET requests to the backend every time a new component loads?

The solution I came up with is a UserService class that handles setting and updating a currentUser object whenever a method inside the class is called.

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

    public currentUser: any;

  constructor(private http: Http) { }

  updateCurrentUser() {
    this.http.get('api/login/currentUser').subscribe(data => {
        this.currentUser = data;
    });
  }

}

However, this approach has resulted in race condition problems. For instance, if the profile component tries to access currentUser.username before the service class completes the request, an error occurs.

I attempted to resolve this issue by checking if currentUser is undefined and then calling updateCurrentUser(), but it did not solve the problem.

if(this.userService.currentUser === undefined){
    this.userService.updateCurrentUser();
}

Update:An error message is displayed in the browser console https://i.sstatic.net/K0ioy.png

Further Details:
I am using data binding to show the username directly from the UserService class. For example:

<span class="username-block">{{userService.currentUser.username}}</span>

I also attempted assigning the currentUser object to a variable within the component attempting to display the username, but encountered the same outcome.

Any suggestions or feedback would be greatly appreciated.

angular typescript

Answer 1

Answer №1

If you want to implement the Elvis/existential operator in your HTML, you can use it by adding a question mark after currentUser to prevent evaluating username if currentUser is undefined.

Once your asynchronous code fills in the data, the page will display it accordingly.

<span class="username-block">{{userService.currentUser?.username}}</span>

Edit

I see that you are outputting userService.currentUser.username. To ensure reactive data handling, consider returning an observable from the service to the component like this:

updateCurrentUser() {
    return this.http.get('api/login/currentUser')
      .catch(error => this.handleError(error, 'currentUser'));
}

Then in the component:

private currentUser;

ngOnInit() {
  this.userService.updateCurrentUser()
    .take(1)
    .subscribe(data => { this.currentUser = data });
}

The html now references the local component copy which will be filled in by the subscription over time. Note that take(1) is used to close the subscription and prevent memory leaks.

    <span class="username-block">{{currentUser?.username}}</span>

Edit #2

To avoid multiple HTTP calls, adjust the service code as follows:

export class UserService {

  private currentUser: any; // private because we only want to access through getCurrentUser()

  constructor(private http: Http) { }

  getCurrentUser() {
    return this.currentUser
      ? Observable.of(this.currentUser) 
      : this.http.get('api/login/currentUser')
          .do(data => { this.currentUser = data }) // cache it for next call
          .catch(error => this.handleError(error, 'currentUser'));
  }

Answer 2

If you want to implement the Elvis/existential operator in your HTML, you can use it by adding a question mark after currentUser to prevent evaluating username if currentUser is undefined.

Once your asynchronous code fills in the data, the page will display it accordingly.

<span class="username-block">{{userService.currentUser?.username}}</span>

Edit

I see that you are outputting userService.currentUser.username. To ensure reactive data handling, consider returning an observable from the service to the component like this:

updateCurrentUser() {
    return this.http.get('api/login/currentUser')
      .catch(error => this.handleError(error, 'currentUser'));
}

Then in the component:

private currentUser;

ngOnInit() {
  this.userService.updateCurrentUser()
    .take(1)
    .subscribe(data => { this.currentUser = data });
}

The html now references the local component copy which will be filled in by the subscription over time. Note that take(1) is used to close the subscription and prevent memory leaks.

    <span class="username-block">{{currentUser?.username}}</span>

Edit #2

To avoid multiple HTTP calls, adjust the service code as follows:

export class UserService {

  private currentUser: any; // private because we only want to access through getCurrentUser()

  constructor(private http: Http) { }

  getCurrentUser() {
    return this.currentUser
      ? Observable.of(this.currentUser) 
      : this.http.get('api/login/currentUser')
          .do(data => { this.currentUser = data }) // cache it for next call
          .catch(error => this.handleError(error, 'currentUser'));
  }

Answer 3

Answer №2

If you are utilizing routing in your application, consider implementing a route resolver on the initial route that requires user data. This resolver will ensure that the view is only displayed once the necessary data has been fetched.

As an illustration, here is an example of a route resolver I have utilized. Take note that it calls a service to fetch the data.

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { IMovie } from './movie';
import { MovieService } from './movie.service';

@Injectable()
export class MovieResolver implements Resolve<IMovie> {

    constructor(private movieService: MovieService) { }

    resolve(route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): Observable<IMovie> {
        const id = route.paramMap.get('id');
        return this.movieService.getMovie(+id);
    }
}

The resolver should then be included in the relevant route configuration, for instance:

  {
    path: ':id',
    resolve: { movie: MovieResolver },
    component: MovieDetailComponent
  },

In this setup, the route will not be visible until the required data has been obtained.

Answer 4

If you are utilizing routing in your application, consider implementing a route resolver on the initial route that requires user data. This resolver will ensure that the view is only displayed once the necessary data has been fetched.

As an illustration, here is an example of a route resolver I have utilized. Take note that it calls a service to fetch the data.

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { IMovie } from './movie';
import { MovieService } from './movie.service';

@Injectable()
export class MovieResolver implements Resolve<IMovie> {

    constructor(private movieService: MovieService) { }

    resolve(route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): Observable<IMovie> {
        const id = route.paramMap.get('id');
        return this.movieService.getMovie(+id);
    }
}

The resolver should then be included in the relevant route configuration, for instance:

  {
    path: ':id',
    resolve: { movie: MovieResolver },
    component: MovieDetailComponent
  },

In this setup, the route will not be visible until the required data has been obtained.

Angular 2/4 - Saving User Object Information in the Front-End Instead of Repeatedly Contacting the Back-End Server

Answer №1

Answer №2

Similar questions

React Traffic Light Component: Colors Stuck After Timeout

How to resolve the issue of "NGUniversal window is not defined"

Error: Unable to convert null or undefined to an object | NextAuth

Is there a way to trigger a function upon the loading of a template in Angular 2?

Attempting to start an Angular project using NG NEW constantly fails nowadays - always ends with error code EPERM

FullCalendar mysteriously missing from SystemJS Builder bundle

Receiving an error when attempting to inject the Router in a component constructor without using the elvis operator

Inadequate execution of a Faux Router

Use `$$state: {…}` within the request rather than the data

Exploring Local Gems with Google Places API in Ionic 2

Retrieve an established SQS eventSource in AWS CDK

TypeScript interface with an optional parameter that is treated as a required parameter

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

Preventing Redundancy in Angular 2: Tips for Avoiding Duplicate Methods

Is it possible to create a TypeScript class that contains various custom functions?

*ngFor not functioning properly within Angular ionic modal

Hold off on utilizing information from a single observable until a later time

Having trouble getting a basic file upload to work in Angular2+? Wondering what the easiest method is to make it function properly? Look no

Display a semantic-ui-react popup in React utilizing Typescript, without the need for a button or anchor tag to trigger it

Angular 5 combined with Electron to create a dynamic user interface with a generated Table