Support for protected routes

[srobertson421]

Is your feature request related to a problem? Please describe. Trying to add protected routes based on async auth data. Redirects don't prevent other routes from matching and rendering.

Describe the solution you'd like Using the middleware option, be able to prevent rendering of predefined routes by using redirect or a separate mount call.

Additional context Here is my router code, the middleware I have above isn't preventing other routes from rendering:

app = crayon.create();

    app.use(crayonSvelte.router(appEl));

    app.use(transition.loader());

    app.use(animate.defaults({
      name: transition.slideLeft,
      duration: 300
    }));

    app.use(animate.routes([
      { from: '/**', name: transition.slideRight  },
      { to: '/**', name: transition.slideLeft }
    ]));

    app.use((req, res, state) => {
      console.log(req);
      console.log(res);
      console.log(state);
      if(!$user && req.routePattern !== '/auth') {
        res.redirect('/auth');
      }
    });

    app.path('/', async (req, res) => {
      const Home = await import('./views/Home.svelte');
      res.mount(Home.default, { req, nav: app });
    });

    app.path('/auth', async (req, res) => {
      const Auth = await import('./components/Auth.svelte');
      res.mount(Auth.default, { req, nav: app });
    });

    app.path('/deals', async (req, res) => {
      const List = await import('./views/List.svelte');
      res.mount(List.default, { req, nav: app });
    });

    app.path('/search', async (req, res) => {
      const Search = await import('./views/Search.svelte');
      res.mount(Search.default, { req, nav: app });
    });

    app.path('/search/:category', async (req, res) => {
      const SearchCategory = await import('./views/SearchCategory.svelte');
      res.mount(SearchCategory.default, { req, nav: app });
    });

    app.path('/agenda', async (req, res) => {
      const Agenda = await import('./views/Agenda.svelte');
      res.mount(Agenda.default, { req, nav: app });
    });

    app.path('/profile', async (req, res) => {
      const Profile = await import('./views/Profile.svelte');
      res.mount(Profile.default, { req, nav: app });
    });

    app.path('/deal/:id', async (req, res) => {
      const Deal = await import('./views/Deal.svelte');
      res.mount(Deal.default, { req, nav: app });
    });

    app.load();

[alshdavid]

Hey thanks for your issue. I have a few examples below illustrating how to achieve what you're trying to. Let me know if you have any questions. Happy for me to close this issue?

Simple example (sync): https://codesandbox.io/s/weathered-cdn-goup2

Example with stores (async): https://codesandbox.io/s/vigorous-satoshi-z3jyv

Example with stores + groups: https://codesandbox.io/s/old-river-6l852

[srobertson421]

@alshdavid Those are great, thanks! I think I was running into issues due to load order, I had other .use calls before the auth middleware, moved it and it's working great.