[Ionic 5] - Logout routine

Ionic Framework
1

Hi, how are you? How is everything?
I have an app, when the user log into the app, some values are set in a Storage of @ionic/storage.

For example:

this.storage.set('email', this.email);
this.storage.set('password', this.password);

So far everything is fine, the problem happens when the user wants to LOGOUT. I follow the next steps when the user press the button to LOGOUT.

  1. Show Loading Alert
  2. Set a empty empty string to the two values in the storage (email and password)
  3. Redirect to the LOGIN page (window.location.assign('/');)

My code would be as follow:

this.showLoading();
this.storage.set('email', '');
this.storage.set('password', '');
window.location.assign('/');

The problem is that sometimes the “Loading” closes and the data (email and password) reset is not performed, nor the redirection, what happens is that it stays on the same page and nothing happens.

Is it correct the redirection (window.location.assign(’/’)) after set the data in Storage of @ionic/storage. ??

Best Regards

2

Be aware that all calls to Ionic storage return a Promise! Therefore, some value might not be written before your next line of code executes, so make sure the write operation is finished before doing the view transition.

Also I recommend to use the Angular router to replace your URL instead of using window directly. If you want to prevent users going back, simply add an option like this:

this.router.navigateByUrl('/', { replaceUrl:true });
2 Likes
3

Thank you very much for your help!
Do you think this would be fine:

        self.storage.set('email','').then((value:any) => 
            {
                console.log('cleared');
                self.storage.set('password','').then((value:any) => 
                {
                  console.log('cleared');
                  self.router.navigateByUrl('/', { replaceUrl:true });
                });
            });
4

This code works great! But I tried this another variant and don’t work, maybe do you have any idea why? this is the code:

self.storage.clear().then(() => 
            {
              self.loading.dismiss();
              self.router.navigateByUrl('/', { replaceUrl:true });
            });

There are sometime when the code works well, but sometimes the Loading dismiss but the redirection don’t works.

Best Regards

5

I recommend avoiding the self idiom, because it was intended for managing execution context before arrow functions were available. Use arrow functions and forget about self. If this is not what you expect, you’ve got a bigger problem that should be fixed.

Secondly, if loading is a component, don’t store loading components in controller properties, because doing so clouds ownership and invites bugs. If it’s an injected instance of LoadingController, then notice that dismiss also returns a Promise.

Thirdly, while I don’t fundamentally disagree with the premise of @saimon’s suggestion of waiting on writes, in practice I find it tedious and error-prone to follow religiously, so I instead follow the convention of only reading from storage once per app run, either at app startup or the first time that data is needed. I never use storage to communicate amongst parts of a running app: I use mutually injected services and Observables to do that. Therefore I can safely ignore when writes actually happen.

1 Like