beforeEnter route hook not working on F7-svelte

1

I am checking the status of user auth by assigning an array of multiple methods to the before route.

Given a checkAuth method and route object below

const checkAuth = ({ app, router, to, from, resolve, reject }) => {
if( /* some condition */ ){
resolve();
}
else{
reject();
}
});

const routes = [
{
name: ‘contact’,
path: ‘/contact/’,
component: ContactPage,
beforeEnter: [checkAuth]
},
]

With the scenario above, the router always resolves even when unauthenticated.

However what I’ve realised is that, when I comment out the component property in the route object, the beforeEnter hook works by calling the component inside the resolve({component: ContactPage}) method. This is tedious as I have to manually check this on every route, but then again impossible to have multiple hooks checks.

Whats funny is that, I’ve built the admin part of this app with vite + core, and it works perfectly fine.

Whats happening to the svelte version???

2

seems ok => confident-cerf-o5mbs1 - CodeSandbox

3

What happens when you reject on your index route? I mean the PageHome route?

confident-cerf-o5mbs1 - CodeSandbox

When navigating within the app using buttons or links, it works. But what am looking for is rejecting on the Home route(/)

4

on-load nothing will happend, there is no much sense to run beforeEnter-hook on initial page.
but, once you navigate (to any page), you won’t be able to navigate back (to home) [unless you resolve it]
here => headless-fire-uj2dfz - CodeSandbox
don’t do it.

5

How then do you check user auth status before displaying the index route which happens to be your Dashboard Page or Protected route?

I’ve achived this using F7-core with vite and its working fine.
In which case all pages except the Login Page receives a beforeEnter hook to check if user is logged in, resolve() else reject().

6

i see now, you are right.
don’t know which behavior is the intended one.

anyway,
it would be more appropriate to use “async” (or different technique) on initial-route.

7

A different technique probably cos Async doesn’t work either.

8

async works => headless-fire-uj2dfz - CodeSandbox

9

here is different/complex way (using core) => holy-frost-be45bi - CodeSandbox

10

Okay, but you see with the Async prop, how do you assign multiple hooks to it like we have with beforeEnter?
For instance:

You have two hook methods

const checkAuth = context => {
/** logic here **
}

const hasPerm = context => {
/** logic here **
}

Using the beforeEnter hook is easy as passing an array of these two methods to your routes.

[
{
beforeEnter: [checkAuth, hasPerm]
}
]

However with Async routes, assigning an array yields errors.

[
{
async: [checkAuth, hasPerm]
}
]

11

edit => headless-fire-uj2dfz - CodeSandbox