bug(vue): redirecting in a navigation guard after going back does not show the correct view

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Relevant context:

I have an app with a home page, a settings page, and a login page. The login page navigates to the home page after login, or back to the route it was redirected from. The home page has a button to navigate to the settings page and the settings page has a back button.

There is a beforeEach navigation guard that checks if the user is logged in; if they are not, it redirects to the login page. If they are logged in, it checks if the destination is the login page; if so, it redirects to the home page.

Now for the problem:

When I try to go to the settings page directly (by entering the URL) while logged out, I am redirected to the login page as expected. After logging in, I am taken to the settings page, again as expected.

The back button does not work correctly now. The initial “back” navigation is to the login page, so the navigation guard redirects to the home page. However, the view shown is the login page. The URL is for the home page. The same happens when using router.back().

It seems to be caused at least in part by the way Ionic’s view stack works.

I am now using replace instead of push (which was actually “incorrect”), even if this does unfortunately mean I no longer get a navigation animation when navigating from the login page. I understand that this was caused by a “bad” implementation of mine, but this situation could arise in other contexts.

Expected Behavior

I would expect Ionic to wait until the navigation was confirmed and then check if the final route was the same as the one “back” from the current view. If the route was the same, Ionic would pop the current view as normal; if it was not (i.e., a navigation guard had caused a redirect), Ionic would create the correct view for the new route, render it beneath the current page, rewrite the page stack to include just that view and the current one, and then navigate to that view as if going back.

Steps to Reproduce

1. Setup
   1. Create an Ionic Vue app with three pages, “home”, “settings”, and “login”.
   2. Add a button/link from the home page to the settings page.
   3. Add a back button from the settings page, default route being for the home page.
   4. Put a button on the login page that pushes to the settings page and stores a flag in global state (e.g. via a Vue composable).
   5. Make a navigation guard that checks the flag and (a) redirects to the login page if it is not set and (b) redirects to the home page if it is set and the current destination is the login page.
2. Enter the URL for the settings page directly. You should be redirected immediately to the login page.
3. Click the button to go to the settings page.
4. Click the back button. The URL should change to the home page but the view shown will be the login page.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.16.3 (C:\Users\Darryl\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.2.6

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v18.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.12.1
   OS     : Windows 10

Additional Information

No response

[darrylnoakes]

Thanks, that clarifies it sufficiently.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.