The data retrieved from the API requires a page refresh to display properly

Question

The data retrieved from the API requires a page refresh to display properly

I've encountered an issue with my authentication flow. After logging in with a user, I have to refresh the page to see the data correctly. Even after logging out and logging in with another user, the view still shows data from the previous user. It seems like it's always one step behind. I attempted to fix this by destroying the subscription but that didn't resolve the issue. Additionally, since the problem starts when I need to refresh the page for the first user's data, destroying the subscription may not be the correct solution.

Here is the code snippet:

auth.service: This is where users' credentials are posted, tokens are received, and data is stored for authenticated users.


import { Storage } from '@ionic/storage';
import { JwtHelperService } from '@auth0/angular-jwt';

export const TOKEN_KEY = 'access_token';
export const USERNAME_KEY = 'username_key';
export const USER_ID = 'user_id';
// Remaining code...

page.ts: This is where I retrieve and display the data in my view. The user service fetches a single user and the subscription is destroyed at the end.


import { Storage } from '@ionic/storage';
import { USER_ID } from 'src/app/services/auth.service';
import { SubscriptionLike } from 'rxjs';

// Remaining code...

login.ts: Manages routing to the main page.


// get return url from route parameters or default to '/'
// Remaining code...

authGuard


export class AuthGuard implements CanActivate {
  // Constructor and canActivate function...
}

javascript angular typescript ionic-framework ionic4

Answer 1

Answer №1

It's recommended to subscribe to the observable instead of checking for

if (this.authService.authenticationState)

. Additionally, keep in mind that interacting with Ionic Storage is asynchronous, so it's crucial to wait for actions to complete before proceeding. Instead of directly calling next on your observable, consider using checkToken() to perform the check and then trigger next on the BehaviorSubject.

Take a look at this revised version:

Service:

import { BehaviorSubject, of, forkJoin } from 'rxjs';
import { tap, switchMap, map } from 'rxjs/operators;

// ...

private authenticationState = new BehaviorSubject(false);
public authenticationState$ = this.authenticationState.asObservable();

checkToken() {
  this.storage.get(TOKEN_KEY).then(access => {
    if (access) {
      this.authenticationState.next(true);
    } else {
      this.authenticationState.next(false);
    }
  });
}

apilogin(username: string, password: string) {
  return this.http.post<any>(`${this.url}`, { username, password }).pipe(
    // switch to inner observable
    switchMap((data: any) => {
      // run all in parallel
      return forkJoin(
        this.storage.set(TOKEN_KEY, 'access'),
        this.storage.set(USERNAME_KEY, 'username'),
        this.storage.set(USER_ID, 'id'),
      )
    }),
    // ensure storage values are set before calling checkToken()
    tap(() => this.checkToken()),
  )
}

// Subscribe to this function in the component for desired behavior
apilogout() {
  forkJoin(
    this.storage.remove(USER_ID),
    this.storage.remove(REFRESH_TOKEN_KEY),
    this.storage.remove(USERNAME_KEY),
    this.storage.remove(TOKEN_KEY)
  ).subscribe(() => this.checkToken())
}

Component should subscribe to the BehaviorSubject:

ngOnInit(): void{
  this.sub = this.authService.authenticationState$.pipe(
    switchMap((data) => {
      return data ? this.storage.get(USER_ID) : of(null)
    }),
    switchMap((id: any) => {
      this.id = id;
      return id ? this.userService.getUserDetails(id) : of(null)
    })
  ).subscribe(val => {
    // Perform necessary actions here!
  })
}

ngOnDestroy(){
  this.sub.unsubscribe();
}

Avoid using any, make sure to type your data properly to models :)

Answer 2

It's recommended to subscribe to the observable instead of checking for

if (this.authService.authenticationState)

. Additionally, keep in mind that interacting with Ionic Storage is asynchronous, so it's crucial to wait for actions to complete before proceeding. Instead of directly calling next on your observable, consider using checkToken() to perform the check and then trigger next on the BehaviorSubject.

Take a look at this revised version:

Service:

import { BehaviorSubject, of, forkJoin } from 'rxjs';
import { tap, switchMap, map } from 'rxjs/operators;

// ...

private authenticationState = new BehaviorSubject(false);
public authenticationState$ = this.authenticationState.asObservable();

checkToken() {
  this.storage.get(TOKEN_KEY).then(access => {
    if (access) {
      this.authenticationState.next(true);
    } else {
      this.authenticationState.next(false);
    }
  });
}

apilogin(username: string, password: string) {
  return this.http.post<any>(`${this.url}`, { username, password }).pipe(
    // switch to inner observable
    switchMap((data: any) => {
      // run all in parallel
      return forkJoin(
        this.storage.set(TOKEN_KEY, 'access'),
        this.storage.set(USERNAME_KEY, 'username'),
        this.storage.set(USER_ID, 'id'),
      )
    }),
    // ensure storage values are set before calling checkToken()
    tap(() => this.checkToken()),
  )
}

// Subscribe to this function in the component for desired behavior
apilogout() {
  forkJoin(
    this.storage.remove(USER_ID),
    this.storage.remove(REFRESH_TOKEN_KEY),
    this.storage.remove(USERNAME_KEY),
    this.storage.remove(TOKEN_KEY)
  ).subscribe(() => this.checkToken())
}

Component should subscribe to the BehaviorSubject:

ngOnInit(): void{
  this.sub = this.authService.authenticationState$.pipe(
    switchMap((data) => {
      return data ? this.storage.get(USER_ID) : of(null)
    }),
    switchMap((id: any) => {
      this.id = id;
      return id ? this.userService.getUserDetails(id) : of(null)
    })
  ).subscribe(val => {
    // Perform necessary actions here!
  })
}

ngOnDestroy(){
  this.sub.unsubscribe();
}

Avoid using any, make sure to type your data properly to models :)

The data retrieved from the API requires a page refresh to display properly

Answer №1

Similar questions

The module '@material-ui/lab' could not be located

A guide for finding a specific string within a subset of an array

The MatInput component in Angular Material remains valid even after the page has finished loading

Choose characteristics based on attributes, where the value after the colons is undefined

What are the steps to leverage npm installed packages in my .js files?

JavaScript code to output CSS styled text: "echo"

What is the best approach for implementing Vuex with TypeScript?

A guide to dynamically adjusting the overflow property for the body element within an AngularJS application

Unable to cancel the setTimeout function by using clearTimeout as the value appears to be null for unknown reasons

The error message "Property '...' is not found on the type 'ServerContextJSONValue'" pops up whenever I try to utilize the useContext() function

Utilize a function within an AngularJS directive

Is it possible to convert ejs to jade?

Is there a way to integrate the AuthState TypeScript Interface into the react-oidc-context Node package for testing in Next.js?

When transitioning between steps in the mat-horizontal-stepper component, the content disappears momentarily

"Filtering a JSON File Based on Button Data Attributes: A Step-by-

The current status of the ajax call is set to 0

Techniques for Utilizing MongoDB Aggregation to Extract Specific Fields from Results

Creating a dynamic jstree from scratch

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

Tips for retrieving a parameter from the oncomplete attribute of an a4j:jsFunction tag