Ionic 6 Vue 3. Can't get the user redirected back to the LoginPage after clearing out the auth token

I’m really stuck with this, I’m trying to logout the user when he taps the Logout ion-item that fires a doLogout() method, this is a snippet which is in a component at components/base/BaseLayout.vue:

//...
methods: {
        ...mapActions("auth", {
            logoutUser: "logoutUser", //this does Preferences.remove('authtoken') and sets an empty auth store state
        }),
        doLogout() {
            menuController.close() //closes the side menu
            .then(() => this.logoutUser())
            .then(() => { this.logoutRedirect(); })
            //.then(() => { this.ionRouter.navigate('/login', 'forward'); }) //tried this too
            //.then(() => { this.$router.push('/login'); } ) //tried this too
            ;
        }
    },
    setup() {
        const ionRouter = useIonRouter();
        const logoutRedirect = () => {
            ionRouter.navigate('/login', 'forward');
        }
        return { ionRouter, logoutRedirect };
   
    }

What am I missing? :fearful:

Welcome!

Try this. You don’t use multiple then().

doLogout() {
    menuController.close() //closes the side menu
        .then(() => {
            this.logoutUser()
            this.logoutRedirect()
        })
    ;
}

EDIT
I would also use ionRouter.push or ionRouter.replace.

1 Like

Hey twestrick, thanks for taking some time to help me.

I applied those changes with no luck, it didn’t work. I don’t see any errors in the js console, the execution reaches that line but there’s no actual transition.

Ok, I managed to make some progress (I guess).
The URL now changes from /home to /login but the view doesn’t transition to the login page. @twestrick this might be a silly issue or setup on my side, any clues?

This is what I have now

computed: {
        ...mapGetters("auth", {
            authData: "getAuthData",
            loginStatus: "getLoginStatus",
        }),
    },
    methods: {
        ...mapActions("auth", {
            logoutUser: "logoutUser",
        }),
        async doLogout() {
            //this.logoutUser();
            console.log('PRE: ', this.loginStatus);//the value here is "success"
            await this.logoutUser(this.userInfo);
            console.log('POST: ', this.loginStatus); //the value here is "loggedout"

            if(this.loginStatus !== "success"){
                console.log('redirecting');//<-- it gets here
                this.ionRouter.replace('/login', 'forward'); //<--here too, URL changes to /login but redirection doesn't happen
                //this.$router.push('/login'); /// tried this, same result
            } else {
                alert('Failed to logout');
            }
        }
    }
    ,
    setup() {
        const ionRouter = useIonRouter();
        return { ionRouter };
    }

It sounds like you don’t have your pages wrapped in an IonPage. Very weird things happen without it.

1 Like

Yeah, I read that somewhere, but the ion-item bound to the click event is in an ion-page, here’s the template

<template>
    <ion-menu content-id="main-content">
        <ion-header>
            <ion-toolbar>
                <ion-title>The App</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-list-header>Hello User!</ion-list-header>
                <ion-note class="ion-padding">some@email.com</ion-note>
                <ion-item>
                    Hello
                </ion-item>
                <ion-item>Report</ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-page id="main-content">
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-menu-button></ion-menu-button>
                </ion-buttons>
                <ion-title>{{ pageTitle }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-item @click="doLogout">logout</ion-item>
            <slot />
        </ion-content>
    </ion-page>
</template>

Did you also double check the login page to make sure it is also wrapped in an IonPage?

Yes, I did, I do have an tag as the root element in the LoginPage.vue template.

In fact, the original issue that I reported is solved, I can log out the user and redirect him back to the login page.

Now I can’t get the user redirected to the /home page after he logs in.

I do see a Vue warning now: [@ionic/vue Warning]: The view you are trying to render for path /home does not have the required component. Transitions and lifecycle methods may not work as expected.

In HomePage.vue I have this:

<template>
    <base-layout page-title="Your dashboard" >
        <h2>hello</h2>
    </base-layout>
</template>
<script>
</script>

<base-layout> is a component that I created which template you can see in my previous response. (it has an ion-page and a ion-menu)

Interesting. Maybe try it with full template code in the page without wrapping it up in base-layout to see if it works?

Another thing to check is that your IonRouterOutlet is correct.

Otherwise, can you provide a reproduction of it in a Git repo or on StackBlitz? I haven’t used the IonMenu in Vue so not too familiar with the setup for it.