Ionic-vue, problem with route replacement

Ionic Framework
1

I’m trying to build a login screen with ionic-vue, I was expecting the user for not having access to go back to the login screen once the token has stored in the storage and redirected to the home page.

My authentication logic is as simple as this:

setup() {
  const router = useRouter()

  async function onSuccess(response: AxiosResponse): Promise<void> {
    await Storage.set({ key: 'token', value: response.data.token })
    const token = await Storage.get({ key: 'token' })

    if (token) router.replace({ name: 'home' })
    else throw new Error("Couldn't set token.")
  }
}

On web environment, the back button (that one beside the address bar) behaves properly which is good. However, on mobile (native, both iOS and Android), when I swipe the screen, it redirecting me back to the login screen.

Is there any kind of method to prevent this behavior?

1 Like
2

I’m trying to achieve this behaviour too!

I am using router.replace instead of router.push but even though history.state.back gets a null value, swiping still works on iOS.

3

Yea, I think it is kind of bug or something. For now, I just created a middleware and attach the logic on beforeRoute method to prevent the app for showing the page when the user is logged in. But still, being able to swipe and suddenly redirected back is not a good UX.

4

They’ve fixed it here:

2 Likes
5

Niiiiceee… Thanks for info mate!