Route guard limitations during asynchronous credential validation

Confirmed Fact: Framework7 Router Hooks Are Synchronous

The Framework7 router executes lifecycle hooks such as beforeEnter and onEnter synchronously. If you start an asynchronous credential check (e.g., fetch or a Promise) inside the hook, the router does not wait for the Promise to resolve. After the hook function returns, the router immediately proceeds with the view transition and mounts the target component.

Likely Explanation for the Flicker

Because the transition starts before the async validation finishes, the protected component may render briefly. When the validation finally resolves and your code calls router.navigate() to redirect, the user sees a flash of the protected view—a “flicker”.

Steps to Prevent the Target Component from Mounting

1. Create an intermediate guard route (e.g., /auth-check) that does not render sensitive UI.
2. In the guard page’s pageInit or onEnter hook, run your asynchronous credential validation.
3. When the Promise resolves, use app.views.main.router.navigate() to send the user to the intended protected page on success, or to a login page on failure.
4. Because the guard page shows only a loading indicator or blank state, the protected component never mounts until validation is complete.

Alternative: Mask the Protected Component

If an extra route is undesirable, initialize the protected component in a hidden or loading state. Only after the async check resolves do you set the state to show the real content, otherwise redirect away.

Diagnostic detail needed: Are you using Framework7 as a standalone library, or is it integrated with a framework such as Vue or React? The integration layer may expose additional lifecycle wrappers that could affect the recommended approach.