IONIC/ANGULAR JWT token handling with a service

Issue

I created a service to handle the token storaging with ionic storage. In the homepage i need to check if a token already exist in the storage using the service and if not to redirect the user to the login page. Here is the code of the homepage:

    ngOnInit(){
    
    this.storage.create() // da fare solo una volta all'avvio dell'app

    this.storage.get('jwtToken').then(token => {
      this.tokenService.saveToken(token);
    });

    this.tokenService.getTokenAsObservable().subscribe(
      token => {
        this.token = token;
        let tokan = token;
      }
    );
    
    if(!this.storage.get('jwtToken')){ 
      this.router.navigate(['/login']);
    } else if (!this.checkUserApi()){
        this.router.navigate(['/login']);
      }
    else {
      this.storage.get('jwtToken').then(token => {
        this.tokenService.saveToken(token);
      });

      this.initFirebase()
    }
  }

  checkUserApi(){
    return true
  }

  ionViewWillEnter(){  
    this.fetchTokenAndLoadData();
    
  }

  async fetchTokenAndLoadData() {
    try {
      this.token = await this.storage.get('token');
      if (this.token) {
        await this.loadData();
      } else {
        console.log('Token not found');
      }
    } catch (error) {
      console.error('Error fetching token:', error);
    }
  }

THe problem is that when i run the app the variable this.token is null, seems like service's subscribe takes too much time and that variable stays null until after the ionwillEnter

EDIT: i use a service to handle the storage:

export class TokenService {

  private tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');

  constructor(private storage: Storage) { 
    this.init();
  }

  async init() {
    const token = await this.storage.get('jwtToken');
    this.tokenSubject.next(token);
  }

  async saveToken(token: string): Promise<void> {
    await this.storage.set('jwtToken', token);
    this.tokenSubject.next(token);
  }


  async removeToken(): Promise<void> {
    await this.storage.remove('jwtToken');
    this.tokenSubject.next('');
  }


  getTokenAsObservable(): Observable<string> {
    return this.tokenSubject.asObservable();
  }
}

And use those methods in other part of the app to create, delete, the token. exemple:

  logout(){
    this.tokenService.removeToken();
    this.router.navigate(['/']);
  }

Like above on a click the logout is executed and the token is deleted, problem is that on navigating the home page the token still exists cuz all the storage methods are async, thats the problem.

Solution

You are not managing your states correctly. you need to assume that any async task can take up to any time, your code needs to handle that. in here you need to put fetchTokenAndLoadData() somewhere after your token is loaded, like in storage.get or better inside the subscription (this.tokenService.getTokenAsObservable().subscribe). also you need a loading mechanism, so you'd have some content before the token is loaded. for example you can define a variable like isLoadingToken and set it to true right before starting to load the token and set it to false when it is loaded (either with the token available or not), then change the contents of your html based on the variable. Or maybe use ion-loading. I realize you haven't implemented the checkUserApi yet, but that is also another async job that needs to be handled in the same way and in series with the loading not parallel.

Answered By - AmirAli Saghaei