Feature Request: Client side global middleware

[UltraCakeBakery]

Is your feature request related to a problem? Please describe.
We want to create a proper middleware solution for our applications. For example: authentication. The requirements are that on every page navigation the user data gets fetched from our API and applied before the page gets mounted to prevent flashes of content.

Currently there isn't a clean way to do this in Svelte Kit and/or Sapper which is preventing us from switching from Vue to Svelte. Something we've been very much looking forward to do.

Describe the solution you'd like
In the config we want to specify an array of prefetch/load functions. Something like this:

import middlewareA from '../'
import middlewareB from '../'

// config
module.exports = {
	// options passed to svelte.compile (https://svelte.dev/docs#svelte_compile)
	compilerOptions: null,

	// an array of file extensions that should be treated as Svelte components
	extensions: ['.svelte'],

	kit: {
	   router: {
                enabled: true,
                middleware: [middlewareA, middlwareB]
             }
         }
}

These functions are just glorified load/prefetch functions that you can already add to a route, but they also give you extra parameters like nextPage, previousPage and the option to redirect the user. When a redirect occurs SvelteKit stops the current chain of middleware's and then starts a new one but for the next page.

A middleware function could look something like this:

import someWritable from 'someWritable.js'

export default async function ({ previousPage, nextPage, redirect, fetch, session, context })
{
    if( nextPage.path === 'whatever/somewhere' )
    {
        return redirect( '/401' )
    }

    if( previousPage.path === 'home' && nextPage.path === 'home/settings' )
    {
        someWritable.onboardingTutorial.startIfNotCompleted( 'home/settings' )
    }
}

We expect svelte kit to do simply this with our array (dramatically oversimplified code incoming):

for( let i = 0; i < middlewaresAndNextRouteLoadMethod.length; i ++ )
{
     middlewaresAndNextRouteLoadMethod[i](parameters)
}

Another solution is to take the nuxtjs route (pun intended 🥁) and have svelte kit just take all the .js files from a ./middleware folder.

Describe alternatives you've considered

1. Importing all global middleware's in every route (not clean and developer friendly).
2. Implementing a system like this myself for my project that hooks in to svelte kits router (dirty and possibly unnecessary).
3. Using hooks and just accepting the unacceptable flashes of content (we rather not).

How important is this feature to you?
Every router we've used so far has a global middleware option. Svelte kit not having this is a deal breaker for us. The solutions available are not perfect and make for either the end user or the developer experience to be worse.

Additional Context
We have a lot of specific things we want to check for on every page as our applications generally are very dynamically build up based on multiple states. More so than your regular svelte/vue/whatever frontend. On average we have 5 global middleware in every application. Importing each middleware in every route component is going to end up causing a lot of bugs and makes for a horrible developer experience.

Again, using svelte would be the dream. We simply love the syntax and performance but we can't make the switch yet for multiple relatively minor reasons, with this being the biggest one.

We do love it so far though, it is not as buggy as we expected it to be. Great work team!

edit: my drunk writing

[benmccann]

Somewhat related might be the suggestion for routing hooks #552. If those hooks were available in the layout it sounds quite similar to this

[moisesbites]

Ii think that #944 and #1165 is the same idea.

[UltraCakeBakery]

Closing this to continue the conversation in #1165 instead. #1165 makes more sense for SvelteKit and basically shares the same idea. If someone could lock this conversation that would be appreciated ✌🏻