[Ioniv 4] How to properly clear the cache when logout

Ionic Framework ionic-v3
1

Hi, when I logout with a user-A and then login with another user (user-B) I still see this user-B data/views. How can I properly clear the cache when the user logout? This is my logout() method written in a service:

logout(): {
    this.token$ = null;
    this.user$ = null;
    this.storage.removeLocalItem('currentUser');
    this.storage.removeLocalItem('currentProfessionals');
    this.storage.removeLocalItem('token');
    this.storage.removeLocalItem('mfa_token');
    this._router.navigate(['/login'], { clearHistory: true } as NavigationExtras);
}
2

Maybe the data is not only kept in localstorage but also the component variables need to be cleared (memory)

3

Hi Tommertom, thanks.
Do you have some idea on how to do it? I don’t have them set on the component itself as this logout() method is called from a service, like this:

…in component.ts

logout() {
    this.modalCtrl.dismiss();
    this.loadingCtrl
        .create({ message: 'Logging out...' })
        .then(loadingEl => {
            loadingEl.present();
            setTimeout(() => {
                this.authService.logout();
                loadingEl.dismiss();
            }, 1000);
        });
}
4

I get nervous whenever I see setTimeout, especially with a magic number. Why is it there?

5

How would you do then?

6

You haven’t explained why it’s there yet, so all I can say at this point is “take it out”.

7

It is there to give a effect of ‘transition’ when displaying the loadingController/modal and dismissing it, otherwise the transition is not smooth, the modal pop up and go away less than a snap.

Maybe my way is not the best, would you suggest me a better one? And better yet, it would be of great if you could help me with the question of this post. Do have any idea? Thanks.

8

Hi

I think it would be best to see the html part of a page for which you see that the data is still shown after the logout.

Then I can clarify what I mean.

Would it be possible for you to share that code snippet?

Regards
Tom

10

Hey Tommertom, thanks for your support.
Please check below:

        <ion-row class="messages-row">
            <ion-col size="12" class="ion-text-center ion-no-padding">
                <ion-item lines="none">
                    <p>Messages</p>
                </ion-item>
            </ion-col>
            <ion-col size="12" routerLink="/tab/tabs/conversations" routerDirection="root" class="ion-text-center ion-no-padding">
                <ion-card>
                    <ion-grid>
                        <ion-row>
                            <ion-col class="email-icon" size="3" class="ion-no-padding">
                                <img src="../../../../assets/images/email-icon.png">
                            </ion-col>
                            <ion-col size="9" class="ion-no-padding">
                                <div *ngIf="!messagesLoaded" class="registration-spinner">
                                    <div class="spinner-text">
                                        <div class="spinner">
                                            <ion-spinner name="crescent"></ion-spinner>
                                        </div>
                                    </div>
                                </div>
                                <ion-item class="bubble-new" lines="none" *ngIf="messagesLoaded && hasMessage">
                                    <p>new</p>
                                </ion-item>
                                <ion-item lines="none">
                                    <p *ngIf="messagesLoaded && hasMessage" [@fadeInOut]>
                                        <span>You have a new message</span><br>
                                        <span [@showAnimation]=animationState>{{ lastMessageUser ? 'from ' + lastMessageUser : ''}}</span>
                                    </p>
                                    <p *ngIf="messagesLoaded && !hasMessage">0 unread message</p>
                                </ion-item>
                            </ion-col>
                        </ion-row>
                    </ion-grid>
                </ion-card>
            </ion-col>
        </ion-row>

As mentioned above, when I logout from one user and login to another, I still see the former user info and when I try to click on this section it is kind of blocked (like there is something above preventing the click - I have to refresh the DevTools console to make it work properly and update to the correct data to be shown). I’m not sure but I suspect that I must have ruined some routing OR maybe something related to APP_INITIALIZER that I’m using to preload some info before app bootstrap.

I don’t get why my logout() does not clean the previous user data as intended.

11

Hi
your code is using concepts which are a bit beyond my reach. I am not familiar with APP_INITIALIZER nor with a [@...] syntax as directive in Angular. What does the latter intend to do?

I assume the messagesLoaded variable of the component with this html is actually an variable which gets cleared at the logout through some sort of service (using observables and subscribes)? Although the initial logout code does not show that.

Not sure if the routerLink works on ion-col. I guess it does. Have you tried the (click) handler to see if it does fire on that specific situation?

Anyway, my 2 cents.

Regards

Tom

12

Appreciate your attention on it Tommertom, well, I’ll keep trying to find the solution, thx.

13

Have you found a solution?

15

I’m aware that this is very far from being a “clean” solution. Having found nothing else to delete the data of the services during the disconnection I update the application:

window.location.reload();

If someone has better I’m interested!

16

That’s an understatement.

Since presumably your app code is fully in charge of “the data of the services”, you should be able to easily design this problem away.

Necessary information:

  • what “the services” are;
  • what “the data” that needs cleaning is;
  • how #2 is stored in #1;
  • confirmation that everything necessary can be done completely within service (not page) code;
  • what “the disconnection” means.