Vue-router. how to disable backbutton on replace?

Ionic Framework Ionic Vue
1

Let’s say you have login page that takes two steps (pages).

On the first one you ask for the email, on the second one you ask for password (or send a magic link or login with SSO).

So you type the email, and when you click “next” we do a router.push() to the next view (password)

Let’s say now we type the password and click “login”.

If successfull, we would like to replace router with “/home” but we don’t want te user to tap on the back button and go back to the password.

On ionic v1 we had something like this:

$ionicViewService.nextViewOptions({
     disableAnimate: true,
     disableBack: true
});

How do we do this in ionic vue?

2

You can use router.replace at password page to remove it from history or prevent useBackButton at home page, but not sure it work this way.

3

Yes, that’s what I am doing for now and it’s working.

But what I would like is some sort of “reset” of the whole router state, or prevent going back to the previous state, but avoid modifying backButton behaviour.

Right now on Home.vue I do:

useBackButton(10, () => {
   console.log('back button detected: do nothing')
   return
})
4

You can use router.replace at password page

For example router.replace('/home'). Or this this is not what you need?

5

That’s what I already do, but still can go back to the first that was pushed.

So when I open the app, I land to /email
then type the email address and on tapping next I do router.push(/password)
then if I am able to log in router.replace('/home')
but if I tap de back button I’m able to go back to /email

6

So, you need go to /password with replace too.

7

Then I wouldn’t be able to go back to email if I typed it wrong.

I mean, that’s a hack, like overriding backButton functionality, but in that case, I’d rather do the backButton hack.

8

Why not? just router.replace(/email).

Other way is check is user already login at email and password pages and redirect to home.

9

Why not? just router.replace(/email).

Then you lose swipe to go back.

Other way is check is user already login at email and password pages and redirect to home.

To me thats more hackish than just disabling the backButton.

I was searching for a built in feature on ionic vue, but maybe it doesn’t exist…

10

doesn’t. js can’t clear history.

1 Like
11

Can you provide a GitHub repo of what you are trying to do?

12

Yes! I will try to do it over the weekend, thanks @ldebeasi

1 Like
13

ionic-login-sample
ionic-login-sample660×1398 3.19 MB

There you go @ldebeasi . Let me know if you need further info

14

Any updates on this @ldebeasi? Am I using it wrong?

Regards!

15

Sorry for the delay – You are using Ionic Vue correctly. I don’t think we expose all the tools necessary to accomplish this. One thing you could do as a workaround is create a route guard on the /login and /login-password routes and have those prevent navigation to the pages when the user is already logged in.

We have seen use cases like this in Ionic Angular and Ionic React too and we are looking into ways we can better address this use case.

2 Likes
16

i have used beforeEach router guard to resolve this issue

2 Likes